thead 上的底部邊框與 tbody tr 中的邊框與表格中的折疊邊框重疊

Question

我在 HTML 中使用表格，我想設置一些樣式。 我添加了一個bottom-border的thead我的表，有是積極類tbody tr增加了一個邊界。
但是， thead的bottom-border與活動類的border-top重疊。

這是因為折疊邊框，但我需要它，因為懸停在tbody tr上無法正常工作。 實際上，它增加了每列之間的間隙。

我怎么能解決這個問題？

這是代碼：

 table { border-collapse: collapse; cursor: default; } table thead { border-bottom: 2px solid; text-align: center; } table thead th { font-weight: normal; } table th, table td { padding: 5px 10px; } table tbody tr:hover { background-color: grey; } table tbody tr.active { border: 1px solid blue; }

 <table> <thead> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> </tr> </thead> <tbody> <tr class="active"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> </tbody> </table>

Answer 1

終於，我找到了訣竅。 我為tbody添加了一個:before ，並為thead添加了一個box-shadow而不是border-bottom 。

 table { border-collapse: collapse; cursor: default; } table thead { box-shadow: 0 2px grey; text-align: center; } table thead th { font-weight: normal; } table th, table td { padding: 5px 10px; } table tbody tr:hover { background-color: grey; } table tbody tr.active { border: 1px solid blue; } table tbody:before { line-height: 0px; content: "\\200C"; display: block; }

 <table> <thead> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> </tr> </thead> <tbody> <tr class="active"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> </tbody> </table>