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

Question

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

表格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 来解决这个问题。

Jsfiddle

table
{
    border-collapse: separate;
}