活动单元格的边界不应延伸到相邻单元格

Question

要突出显示边框的活动单元格，但如果相邻单元格具有 colspan 或 rowspan，则活动单元格的边框会延伸到相邻单元格的全长。

table html

<table class="table table-bordered">
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td class="cell-active"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td colspan="3" rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

活动单元格css

table td.cell-active {
  border: 1px double #36CA2C !important; 
  background-color: rgba(121, 255, 21, 0.1);
}

jsFiddle -> https://jsfiddle.net/vcwg38ot/1/

请帮助使活动单元格的边框只显示给它自己。

UPD：大纲有帮助，但左边框和上边框在单元格之外。如果你改变偏移量，它会立即改变所有边界，这意味着你不能改变从左到上的偏移量 https://jsfiddle.net/vcwg38ot/11/

Answer 1

不知道我是否理解了你的问题。但是我会尝试在这里以我有限的知识来回答。当您使用 colspan=3 和 rowspan=2 时，这意味着您需要一个宽度为 3 列、高度为 2 行的单元格。因此，当您认为单元格的边框重叠或合并时，实际上它是一个单元格，宽度是正常宽度的 3 倍，高度是单元格正常高度的 2 倍。

谢谢。

Answer 2

我检查了您在 Chrome(V 46.0.2490.71 m) 和 Mozilla(V 41.0.2) 中的代码。它在 Mozilla 中运行良好，但 Chrome 扩展了绿色边框。 I think it is chrome bug。但是，您可以通过将 border-collapse: separate; 赋给 table.

来解决 chrome 中的这个问题

Jsfiddle

table
{
    border-collapse: separate;
}

活动单元格的边界不应延伸到相邻单元格

The borders of the active cell should not extend to adjacent cell

html

css

html-table

cell