HTML 表格中不可选择的内容/文本

Question

我有以下html：

<table class="code-table hljs">
  <tbody>
    <tr class="code-row">
      <td class="line-number unselectable">1</td>
      <td class="code-col">one</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">2</td>
      <td class="code-col">two</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">3</td>
      <td class="code-col">three</td>
    </tr>
  </tbody>
</table>

相关的css：

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

在 Firefox 和 Chrome 中，如果我选择所有 (ctrl-a)，我期望发生的情况是，只会选择“一”、“二”和“三”，而不是行号。但是，当我粘贴剪贴板中的内容时，我会得到不同的结果：

Chrome 输出：

one
2 two
3 three

火狐输出：

one

two

three

因此，Chrome 会复制除第一行之外的所有不可选择的行，而 Firefox 会在不应该存在的地方添加一个额外的行。

当前 Chrome 版本为 54.0.2840.71 m，当前 firefox 版本为 49.0.2（根据http://caniuse.com/#feat=user-select-none，两者都可以使用user-select: none;

目前是否可以使用 css 解决方案？

编辑 请注意，我收到的表正在由另一个库呈现，我真的只能操作类。

Answer 1

目前是否可以使用 css 解决方案？

对此的 HTML 解决方案是可能的：

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

Answer 2

@Rounin 几乎做到了。这是他所做的修改版本。它将显示突出显示 1-3 但它不会复制。

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  visibility: hidden;
  display: block;
 }


 .code-table {
 counter-reset: code-table;
 }

 .code-table tr td:nth-of-type(2)::before {
 counter-increment: code-table;
 content: counter(code-table) '  \00a0\00a0';
 }

<table class="code-table hljs">
  <tbody>
    <tr class="code-row">
      <td class="line-number unselectable">1</td>
      <td class="code-col">one</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">2</td>
      <td class="code-col">two</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">3</td>
      <td class="code-col">three</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以删除.code-table 的第一列

visibility: collapse;

然后您可以在.code-table 的第二列中部署一个包含 CSS 计数器的 ::before 伪元素来解决此问题：

.code-table {
counter-reset: code-table;
}

.code-table tr td:nth-of-type(1) {
visibility: collapse;
}

.code-table tr td:nth-of-type(2)::before {
counter-increment: code-table;
content: counter(code-table) ': ';
}

<table class="code-table hljs">
  <tbody>
    <tr class="code-row">
      <td class="line-number unselectable">1</td>
      <td class="code-col">one</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">2</td>
      <td class="code-col">two</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">3</td>
      <td class="code-col">three</td>
    </tr>
  </tbody>
</table>