html - 表格中未显示边框底部宽度

Question

我的问题是，在 CSS 中，在 table tr:nth-child(1) 规则中，border-bottom-width: 5px 不起作用，但是 background-color: gold 是。

有什么想法可以让 border-bottom-width: 5px 起作用吗？

这是我的完整代码:

table {
  border: 5px double #999;
  background-color: white;
  border-spacing: 5px 1em;
  empty-cells: hide;
  margin-left: auto;
  margin-right: auto;
}

table th,
table td {
  border: 1px solid black;
  padding: 0.5em;
}

table tr:nth-child(1) {
  background-color: gold;
  border-bottom-width: 5px;
}

<table>
  <caption>zľavové hodiny</caption>
  <tr>
    <th>zač./deň</th>
    <th>pondelok</th>
    <th>utorok</th>
    <th>streda</th>
    <th>štvrtok</th>
    <th>piatok</th>
  </tr>
  <tr>
    <th>10:00</th>
    <td></td>
    <td></td>
    <td colspan="3">práčky, sušičky (-20%)</td>
  </tr>
  <tr>
    <th>12:00</th>
    <td colspan="2">mikrovlnné rúry (-25%)</td>
    <td></td>
    <td>vysávače (-30%)</td>
    <td></td>
  </tr>
</table>

Answer 1

因为您正在使用扩展边框(通过 border-spacing 属性)，tr 元素没有边框 - 它是 th s(或潜在的 tds)在它们里面。

您只需要明确声明要将边框应用到所选 tr 内的单元格，如下所示:

table tr:nth-child(1) > th {
  background-color: gold;
  border-bottom-width: 5px;
}

完整片段:

table {
  border: 5px double #999;
  background-color: white;
  border-spacing: 5px 1em;
  empty-cells: hide;
  margin-left: auto;
  margin-right: auto;
}

table th,
table td {
  border: 1px solid black;
  padding: 0.5em;
}

table tr:nth-child(1) > th {
  background-color: gold;
  border-bottom-width: 5px;
}

<table>
  <caption>zľavové hodiny</caption>
  <tr>
    <th>zač./deň</th>
    <th>pondelok</th>
    <th>utorok</th>
    <th>streda</th>
    <th>štvrtok</th>
    <th>piatok</th>
  </tr>
  <tr>
    <th>10:00</th>
    <td></td>
    <td></td>
    <td colspan="3">práčky, sušičky (-20%)</td>
  </tr>
  <tr>
    <th>12:00</th>
    <td colspan="2">mikrovlnné rúry (-25%)</td>
    <td></td>
    <td>vysávače (-30%)</td>
    <td></td>
  </tr>
</table>