如何修复带有圆角的HTML表格上的间隙？

Question

I have no access to change core HTML, only CSS, but the tables I am working with have a weird gap in the corners that I am trying to fix.

 .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

Does turning the whole table and div background into the color and the tbody back to white do the trick?

.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

Simple, set: border-radius:0; on your table.

The browser is trying to set the radius of the table's corners to match, but is getting a rounding error. By using radius:0 you are forcing the browser to 'clip' the corner instead.