html - 事件单元格的边界不应延伸到相邻单元格

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 倍。

谢谢。