如何使表格中只有一列可选？

Posted 2023-03-06

【中文标题】如何使表格中只有一列可选？

【英文标题】：How can I make only one column of a table selectable?

【发布时间】：2015-11-09 10:24:24

【问题描述】：

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

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

当用户复制和粘贴时，我希望输出只是： 第1行 线2 第 3 行 ... 第7行

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

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

谢谢！

【参考方案1】：

请查看此示例，尝试使用下面的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>

【参考方案2】：

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

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>

【参考方案3】：

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/

【讨论】：

感谢您的回复。虽然第一列没有突出显示，但如果我复制和粘贴，第一列仍然会在我粘贴时显示。

错了。您不允许在第一列内开始或结束选择。但是如果你选择几行并复制它们，第一列也会在那里。

你是对的，我只是检查了我是否可以选择它，但当你复制它时会发生什么。

这种行为似乎与浏览器相关：刚刚尝试过并且使用最新版本：Chrome 和 IE 将粘贴第一列，但 Firefox 不会。 FireFox 和 Chrome 不会突出显示第一列，IE 会...

@Qwertiy 你找到了使用 css 的最佳解决方案最佳解决方案