表格中未显示border-bottom-width

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（或可能是td s）在他们里面做。

您只需要明确声明要将边框应用于所选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>

Answer 2

为了使用CSS调整单个表格行的边框，您需要在border-collapse: collapse;元素中添加table。但是，这将导致其余样式看起来有所不同。 This question有更多信息。

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

table th, table td { 
border: 1px solid black;
padding: 0.5em; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
border-bottom: 15px solid black;
}

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