html - 如何使用 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>