如何仅使表的一列可选？

Question

是否可以防止用户突出显示表中的一列？

我有一个两栏的桌子。 用户将需要在第二列而不是第一列中复制内容。

<table>
    <tr>
        <td>col1</td>
        <td>line1</td>
    </tr>
    <tr>
        <td>col1</td>
        <td>line2</td>
    </tr>
    <tr>
        <td>col1</td>
        <td>line3</td>
    </tr>
</table>

这是带有示例的JSFiddle： http : //jsfiddle.net/vepq0e29/

当用户复制和粘贴时，我希望输出为：line1 line2 line3 ... line7

当用户选择表格时，我不希望col1出现或突出显示。

如何使用户只能从第二列中选择和复制内容？

谢谢！

Answer 1

您可以使用伪元素来显示文本。 伪元素中的文本目前不会被复制（不确定是否会在某个时候更改）。

http://jsfiddle.net/vepq0e29/3/

 td:first-child:after { content: attr(aria-label); } 

 <table> <tr> <td aria-label="col1"></td> <td>line1</td> </tr> <tr> <td aria-label="col1"></td> <td>line2</td> </tr> <tr> <td aria-label="col1"></td> <td>line3</td> </tr> <tr> <td aria-label="col1"></td> <td>line4</td> </tr> <tr> <td aria-label="col1"></td> <td>line5</td> </tr> <tr> <td aria-label="col1"></td> <td>line6</td> </tr> <tr> <td aria-label="col1"></td> <td>line7</td> </tr> </table> 

Answer 2

tr td:first-child {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

用户只要不查看html源代码就不能选择第一列。 http://jsfiddle.net/vepq0e29/1/

Answer 3

请签出此示例，尝试使用下面的Run Cde Snippet ，只需选择单列中的所有行，然后复制并粘贴到任何编辑器中即可查看结果：）

希望这会有所帮助

 div.table { display: block; width: 100%; } div.td-outer { width: 48%; display: inline-block; border: 1px solid #00aaff; text-align: center; vertical-align: middle; height: 100%; } div.tr { display: block; text-align: center; height: 140px; vertical-align: middle; } div.td-inner { display: inline-block; border: 1px solid #ccc; width: 90%; vertical-align: middle; height: 95%; margin: 3px; } div.td-inner span { height: 95%; vertical-align: middle; } 

 <div class="table"> <div class="td-outer"> <div class="tr"> <div class="td-inner"> <span> col1 </span> </div> </div> <div class="tr"> <div class="td-inner"> <span> col1 </span> </div> </div> </div> <div class="td-outer"> <div class="tr"> <div class="td-inner"> <span> line1 </span> </div> </div> <div class="tr"> <div class="td-inner"> <span> line2 </span> </div> </div> </div> </div>