如何使用 JS/CSS/HTML 勾勒 table 列

Question

我需要 select 单击 table 列。要显示 selection，我需要概述 table 列。

我设法在需要的列中勾勒出每一个，见图：

然而，这不适合我：我需要去掉内线。 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 为例）。

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

这是（逻辑）：

为所有单元格设置左右边框。
将上边框放在第一行的适当单元格中
将下边框放置到最后一行的相应单元格中

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

例子

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>

如何使用 JS/CSS/HTML 勾勒 table 列

How to outline table column using JS/CSS/HTML

html

css

html-table

less

ember.js