html - 如何修复带有圆 Angular 的 HTML 表格上的间隙？

Question

我无权更改核心 HTML，只能更改 CSS，但我正在使用的表格的 Angular 落有一个奇怪的缺口，我正在尝试修复。

.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>