当有圆角时，如何防止thead背景色泄漏？

Question

我有一张带圆角的桌子。我仅为thead指定了不同的背景颜色。

在除Firefox之外的所有浏览器上，背景颜色都会通过圆角泄漏。我已经将overflow设置为hidden，但这似乎无济于事。

如何防止背景色从桌子的圆角漏出？

这是代码：https://codepen.io/ayushn21/pen/OJVRMgG

谢谢！

Answer 1

您可以将cellspacing="0"添加到<table>以删除表格和单元格之间的空间。这也可以通过<th>解决您的边界半径问题：

<table cellspacing="0"></table>

Answer 2

您可以将border-top-left-radius:10px;和border-top-right-radius:10px;添加到第一个/最后一个单元格。

如果仍在发生，您可能还想将background-clip:padding-box;添加到这些单元格中。

我在此CSS-tricks article中发现了这些技巧。

Answer 3

尝试一下：

table {
  tr:first-child th:first-child {
    border-top-left-radius: 16px;
  }
  tr:first-child th:last-child {
    border-top-right-radius: 16px;
  }
}

您可以对最后一行执行相同操作：

table {
  tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
  }
  tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
  }
}

Answer 4

您必须为适当的border-radius单元格设置th，如下所示。因此，只需将以下内容添加到CSS的Codepen Example中即可。

  th:first-child {
    border-top-left-radius: 10px;
  }
  th:last-child {
    border-top-right-radius: 10px;
  }

在下面的代码段中尝试一下。

table {
	 border: 1px solid #bcccdc;
	 border-collapse: separate;
	 border-radius: 10px;
	 overflow: hidden;
}
 table td, table th {
	 padding: 10px;
	 vertical-align: middle;
	 border-left: 1px solid #bcccdc;
	 border-top: 1px solid #bcccdc;
}
 table th:first-child {
	 border-top-left-radius: 10px;
}
 table th:last-child {
	 border-top-right-radius: 10px;
}
 table th {
	 font-family: sans-serif;
	 background-color: #f1f5f8;
	 border-top: none;
}
 table td:first-child, table th:first-child {
	 border-left: none;
}
 table tr.section-header {
	 background-color: #eefcf5;
	 font-size: 80%;
	 font-weight: 500;
}
 table caption {
	 font-family: sans-serif;
	 font-style: italic;
	 margin-bottom: 5px;
	 font-weight: 500;
	 text-align: center;
}

<table>
  <caption>A caption</caption>
  <thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>    
  </tbody>
</table>