如何僅使表的一列可選？

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>