如何才能选择表中的一列？

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

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

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

我有一个2列的表。用户希望复制第二列中的内容，而不是第一列。

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

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

这是一个JSFiddle的例子：http：//jsfiddle.net/vepq0e29/

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

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

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

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

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

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

Thanks!

谢谢！

3 个解决方案

#1

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>

#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 */      
}

The user can't select the first column as long as he is not viewing the html source code. http://jsfiddle.net/vepq0e29/1/

只要用户没有查看html源代码，用户就无法选择第一列。 http://jsfiddle.net/vepq0e29/1/

#3

Please checkout this example, try yourself use Run Cde Snippet below and just select all rows in single column and then copy and paste in any editor and see results :)

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

Hope this will help

希望这会有所帮助

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>

#1