Question

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

我有一个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>

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

当用户复制和粘贴时，我希望输出只是：一号线 2号线 3号线 ... line7

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

如何制作，以便用户只能从第二列中选择和复制内容？

谢谢！

Answer 1

您可以使用伪元素来显示文本。来自伪元素的文本此刻永远不会被复制（不确定，如果它有时会被更改）。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

请查看此示例，尝试使用下面的运行Cde代码段，然后选择单列中的所有行，然后复制并粘贴到任何编辑器中并查看结果：）

希望这会有所帮助

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>

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

3 个答案: