如何使用 JS/CSS/HTML 勾勒表格列

Question

我需要在点击时选择一个表格列。为了显示选择，我需要勾勒表格列。

我设法在所需的列中概述了每个，见图：

但是，这不适合我：我需要摆脱内心的线条。 我目前使用的 CSS（实际上是 LESS）：

  td.fd-selected
  {
    outline: 0.25em dashed rgb(79,115,176);
    background-color: rgba(79,115,176, 0.25);
  }

Answer 1

很遗憾，outline 无法做到这一点。 outline 基本上用于突出显示整个焦点元素（主要是表单元素）。在其默认设置中，它使用操作系统或网络浏览器本身提供的大纲（IE 为前者的示例，Chrome 为后者的示例）。

唯一可靠（也是最简单的）解决方案是使用边框。

方法如下（逻辑）：

1. 为所有单元格设置左右边框。
2. 将顶部边框放置到第一行的相应单元格
3. 将底部边框放置到最后一行的相应单元格

下面的示例还显示了如何突出显示标题。

示例

table{
  border-collapse: collapse;
}

th {
  background-color: #efefef;
}

th, td {
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
}

td.outline {
  border-left: 2px dotted #06c;
  border-right: 2px dotted #06c;
}

tr:first-child > td.outline {
  border-top: 2px dotted #06c;
}

tr:last-child > td.outline {
  border-bottom: 2px dotted #06c;
}

/*how could it look like with the header*/

th.outline {
  background-color: #99ccee;
  border: 2px dotted #06c
}

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th class="outline"></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td class="outline"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="outline"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="outline"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="outline"></td>
      <td></td>
    </tr>
  </tbody>
</table>