如何使表列不可复制？（HTML/CSS）

Question

我有一个简单的表：

Column A | Column B
--------------------
    A    |  Item1 
    B    |  Item2    
    C    |  Item3   

我想让第一列不可复制。当用户选择表行并按 Ctrl+C 时，他应该得到

Item1
Item2
Item3

但不是

A  Item1 
B  Item2    
C  Item3  

我尝试过-moz-user-select: none; -webkit-user-select: none; user-select: none;，但没有成功。文本未被选择，但仍在复制。它可以在 Firefox 中运行，但不能在 Chrome 和 Opera 中运行。

对我有用的解决方案： 由于 height() 不准确，它仍然闪烁并稍微修改行高，但对我来说没问题。

Column A | Column B
--------------------
    A    |  Item1 
    B    |  Item2    
    C    |  Item3   

Item1
Item2
Item3

当然，如果不可复制的单元格中只有文本和图像（例如事件处理程序），则需要另一种解决方法。

Answer 1

我不确定这是否符合您的需求（因为与 Internet Explorer不兼容） ，但一个选项是使用::before/::after伪元素生成第一列内容并防止它被选择/复制。

同样为了遵循DRY原则，我们可以使用data-*属性来定义内容，然后使用attr()表达式将其分配给伪元素。

table > tbody td:first-child::before {
  content: attr(data-content);
}
table > thead th:first-child::before {
  content: attr(data-content);
}

<table>
  <thead>
    <tr>
      <th data-content="Column A"></th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-content="This"></td>
      <td>
        Item #1
      </td>
    </tr>
    <tr>
      <td data-content="is"></td>
      <td>
        Item #2
      </td>
    </tr>
    <tr>
      <td data-content="a"></td>
      <td>
        Item #3
      </td>
    </tr>
    <tr>
      <td data-content="demo"></td>
      <td>
        Item #4
      </td>
    </tr>
  </tbody>
</table>

Answer 2

嗯，如果您三次单击 B 列单元格，它只会选择 B 列。我认为您无法阻止访问者选择这两个单元格（如果他们愿意）。

这看起来也像是 ul 的情况，而不是 table 的情况。在 ul 中，如果复制文本，他们将无法获得数字。