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

Question

我有一个 table 圆角。我只为 thead.

指定了不同的背景颜色

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

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

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

谢谢！

Answer 1

您可以将 cellspacing="0" 添加到 <table> 以删除 table 和单元格之间的 space。这也将解决 <th>:

的边界半径问题

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

Answer 2

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

您可能还想将 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 单元格（第一个和最后一个子节点相应地） .因此，只需将以下内容添加到 Codepen Example.

的 CSS

  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>

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

How do you stop a thead background color from leaking when there are rounded corners?

html

css

html-table

rounded-corners