在CSS中填写整个表格行

Question

How can I fill (with background-color ) an entire table row when I have a table with different numbers of columns in each row?

I have a table like this:

But I want to color the entire line to the end, like this (with the same color, not yellow):

Now, I am trying to do it like this:

tr:nth-child(2n+1) {
    background-color: rgb(240, 240, 240);
}

Answer 1

You need to set colspan on the last td for row 1 and 2, or else it won't stretch to full table width.

 table, body { margin-top: 0px; padding-top: 0px; text-align: top; border-collapse: collapse; } td#naglowek { font-family: verdana; font-size: 14px; font-weight: bold; text-align: left; background-color: black; color: white; } td:first-child { font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; } tr:nth-child(2n+1) { background-color: Red; } td { font-family: verdana; font-size: 10px; text-align: left; padding-top: 2px; padding-bottom: 2px; } th { padding-top: 10px; font-family: verdana; font-size: 9px; font-weight: bold; border-bottom: solid 0px black; text-align: left; } 

  <table> <tr> <td>Imie</td> <td colspan='3'>Wartosc</td> </tr> <tr> <td>Nazwisko</td> <td colspan='3'>Wartosc</td> </tr> <tr> <td>Adres</td> <td><b>Kraj</b></td> <td><b>Województwo</b></td> <td><b>Miejscowość</b></td> </tr> <tr> <td></td> <td>Wartość</td> <td>Wartość</td> <td>Wartość</td> </tr> </table> 

Update

Based on your comments where a solution without the need of empty td and colspan and after some thinking, I came up with this trick, which could be an alternative, though you need to test it in all major browsers to make sure it works (I tested it on Windows using Chrome, FF, Edge, IE11 with success).

 table, body { margin-top: 0px; padding-top: 0px; text-align: top; border-collapse: collapse; } td#naglowek { font-family: verdana; font-size: 14px; font-weight: bold; text-align: left; background-color: black; color: white; } td:first-child { font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; } td { font-family: verdana; font-size: 10px; text-align: left; padding-top: 2px; padding-bottom: 2px; } th { padding-top: 10px; font-family: verdana; font-size: 9px; font-weight: bold; border-bottom: solid 0px black; text-align: left; } /* begin - fix for full width background color */ table { overflow: hidden; } tr:nth-child(2n+1) td:first-child { position: relative; } tr:nth-child(2n+1) td:first-child:after { content: ' '; position: absolute; left: 0; top: 0; bottom: 0; width: 100vw; background-color: red; z-index: -1; } /* end - fix for full width background color */ 

 <table> <tr> <td>Imie</td> <td>Wartosc</td> </tr> <tr> <td>Nazwisko</td> <td>Wartosc</td> </tr> <tr> <td>Adres</td> <td><b>Kraj</b></td> <td><b>Województwo</b></td> <td><b>Miejscowość</b></td> </tr> <tr> <td></td> <td>Wartość</td> <td>Wartość</td> <td>Wartość</td> </tr> </table> 

Answer 2

You can simply add the colspan attribute to your table rows where the rows have less than the full number of cells. For example <td colspan="3">Wartosc</td> :

 table, body { margin-top: 0px; padding-top: 0px; text-align: top; border-collapse: collapse; } td#naglowek { font-family: verdana; font-size: 14px; font-weight: bold; text-align: left; background-color: black; color: white; } td:first-child { font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; } tr:nth-child(2n+1) { background-color: Red; } td { font-family: verdana; font-size: 10px; text-align: left; padding-top: 2px; padding-bottom: 2px; } th { padding-top: 10px; font-family: verdana; font-size: 9px; font-weight: bold; border-bottom: solid 0px black; text-align: left; } 

 <table> <tr> <td>Imie</td> <td colspan="3">Wartosc</td> </tr> <tr> <td>Nazwisko</td> <td>Wartosc</td> </tr> <tr> <td>Adres</td> <td><b>Kraj</b> </td> <td><b>Województwo</b> </td> <td><b>Miejscowość</b> </td> </tr> <tr> <td></td> <td>Wartość</td> <td>Wartość</td> <td>Wartość</td> </tr> </table>