活動單元格的邊框不應延伸到相鄰單元格

活動單元格以高亮顯示的邊框，但如果相鄰單元格具有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

活動單元格的邊框不應延伸到相鄰單元格

回答

相關問題