如何修復帶有圓角的HTML表格上的間隙？

Question

我無權更改核心HTML，只有CSS，但我正在使用的表在嘗試修復的角落有一個怪異的缺口。

 .tabular-container { border: 2px solid #0093c9; border-radius: 8px; overflow: hidden; box-sizing: border-box; } .heading-row { background: #0093c9; font-weight: bold; } table { font-family: Arial; width: 100%; border-collapse: collapse; background: white; overflow-x: hidden; } th, td { padding: 10px; text-align: left; } 

 <div class="tabular-container"> <table class=""> <thead class=""> <tr class="heading-row"> <th colspan="2">Rounded corners table</th> </tr> </thead> <tbody> <tr class="tabular__row"> <td>kk</td> <td>kk</td> </tr> <tr class="tabular__row"> <td colspan="2">This is a sample table only</td> </tr> </tbody> </table> </div> 

Answer 1

將整個表格和div背景變成彩色，然后將tbody變回白色是否可以解決問題？

.tabular-container {
  background: #0093c9;
}

table {
  font-family: Arial;
  width: 100%;
  border-collapse: collapse;
  background: white;
  overflow-x: hidden;
  background: #0093c9;
}

tbody{
  background: white;
}

 .tabular-container { border: 2px solid #0093c9; border-radius: 8px; overflow: hidden; box-sizing: border-box; background: #0093c9; } .heading-row th{ font-weight: bold; } table { font-family: Arial; width: 100%; border-collapse: collapse; background: white; overflow-x: hidden; background: #0093c9; } th, td { padding: 10px; text-align: left; } tbody{ background: white; } 

 <div class="tabular-container"> <table class=""> <thead class=""> <tr class="heading-row"> <th colspan="2">Rounded corners table</th> </tr> </thead> <tbody> <tr class="tabular__row"> <td>kk</td> <td>kk</td> </tr> <tr class="tabular__row"> <td colspan="2">This is a sample table only</td> </tr> </tbody> </table> </div> 

Answer 2

簡單設置： border-radius:0; 在你的桌子上。

瀏覽器試圖將表格的拐角半徑設置為匹配，但出現了舍入錯誤。 通過使用radius：0，您將強制瀏覽器“剪切”角落。