如何使表格的仅一列可选? [英] How can I make only one column of a table selectable?

问题描述

我可以阻止用户突出显示表中的一列吗?

Can I prevent the user from highlighting one column in a table?

我有一个2列的桌子.用户将要在第二列而不是第一列中复制内容.

I have a 2-column table. Users will want to copy the content in the second column, but not the first column.

<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/

Here's a JSFiddle with an example: http://jsfiddle.net/vepq0e29/

当用户复制和粘贴时，我希望输出为:1号线2号线3号线...第7行

When the user copies and pastes, I want the output to just be: line1 line2 line3 ... line7

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

I don't want col1 to show up or be highlighted when the user selects the table.

我如何做到这一点，以便用户只能从第二列中选择和复制内容?

How can I make it so that users can only select and copy content from the second column?

谢谢！

推荐答案

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

You can use pseudo-elements to show the text. Text from pseudo-elements is never copied at the moment (not sure, if it'll be changed sometime).

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>

这篇关于如何使表格的仅一列可选?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！