Search code examples
htmlcssbackground-colorcss-tables

Fill entire table row in CSS

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:

enter image description here

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

enter image description here

Now, I am trying to do it like this:

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

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