当有圆角时，如何阻止主题背景颜色泄漏？答案

【问题标题】：How do you stop a thead background color from leaking when there are rounded corners?当有圆角时，如何阻止主题背景颜色泄漏？
【发布时间】：2020-06-04 00:21:12
【问题描述】：

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

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

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

代码如下： https://codepen.io/ayushn21/pen/OJVRMgG

谢谢！

【问题讨论】：

标签： html css html-table rounded-corners

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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;
  }
}

【讨论】：

【解决方案4】：

您必须为适当的th 单元格（相应的第一个和最后一个孩子）。因此，只需将以下内容添加到您的Codepen Example 的CSS。

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

在下面的 sn-p 中尝试一下。

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>

【讨论】：