仅选择HTML表中的单个列

Question

仅选择HTML表中的单个列

Nag*_*elu 3 html css jquery

我需要使用鼠标指针从HTML表中选择单个列的文本.

例如,请考虑下表.

在此表中,我无法单独选择Lastname列的文本.相反,在向下拖动鼠标的同时也会选择其余的表格内容.

最终目的是分别选择每一列.有没有办法在表格中选择单列文本？

尝试了所有不同的选择-moz-user-select,但没有成功.

Answer 1

Dav*_*che 7

如果希望列可选,则必须在HTML中提供该结构.这将涉及在表格中使用表格,如下所示:http: //codepen.io/DavidvanDriessche/pen/jqbeqK

基本方法是使一个外表具有单行.此行包含所需的列(td)元素(虽然示例显示了三个,但可以轻松地将其调整为您想要/需要的任意数量的列.

这些td元素包含它们自己的表,只有行(每行都有一列).现在可以单独选择列.

<table><tr>

    <td>
      <table>
        <tr><th>First name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Last name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Third name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>  

</tr></table>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Sho*_*lam 5

将一个类添加到您的姓氏并添加此 css 属性。

这是jsfiddle的另一种方法。

table, th, td {
    border: 1px solid black;
}
.unselectable {
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select:none;
	user-select: none;
}
.selectable {
    -webkit-touch-callout: all;
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	-o-user-select:all;
	user-select: all;
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <head>
  
  </head>
  <body>
    <h2>Add some css to lastname</h2>

    <table>
      <tr>
        <th class="unselectable">Firstname</th>
        <th class="selectable">Lastname</th>
      </tr>
      <tr>
        <td class="unselectable">Peter</td>
        <td class="selectable">Griffin</td>
      </tr>
      <tr>
        <td class="unselectable">Lois</td>
        <td class="selectable">Griffin</td>
      </tr>
     </table>
    
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，9 月前
查看次数：	10711 次
最近记录：	7 年，5 月前