Border-bottom-width is not showing in table

Question

My problem is that in CSS, inside a table tr:nth-child(1) rule, border-bottom-width: 5px is not working, but background-color: gold is.

Any ideas how to make border-bottom-width: 5px work?

This is my full code:

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>

score 0 · Answer 1 · answered Jan 14 '19 at 16:17

Because you’re using expanded borders (with the border-spacing property), the tr elements have no borders - it’s the ths (or potentially tds) inside them that do.

You just need to explicitly state that you want to apply the border to the cells within the selected tr, like this:

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

Full snippet:

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>

score 0 · Answer 2 · answered Jan 14 '19 at 16:18

In order to adjust the border of an individual table row with CSS, you need to add border-collapse: collapse; to your table element. This will cause the rest of your styling to look different, however. This question has more information.

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>

Border-bottom-width is not showing in table

2 Answers2