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

活动单元格以高亮显示的边框，但如果相邻单元格具有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/

来源

2015-10-18 Ernest Faizullin

我在Chrome（V 46.0.2490.71 m）和Mozilla（V 41.0.2）中检查了您的代码。它在Mozilla中运行得非常好，但Chrome扩展了绿色边界。 I think it is chrome bug。但是，您可以通过向table提供border-collapse: separate;来解决铬问题。

Jsfiddle

table 
{ 
    border-collapse: separate; 
}

来源

2015-10-18 05:05:40 Alex

太感谢你了！ –

@ErnestFaizullin欢迎您。 [这是铬错误]（https://code.google.com/p/chromium/issues/detail?id=356132）。见[this]（http://codepen.io/anon/pen/wtJbl/） – Alex

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

谢谢。

来源

2015-10-18 04:34:45 InsomniacSabbir

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

回答

相关问题