CODEWITHSUNDEEP
htmlcsshtml-table
Patrick Jennings
Patrick Jennings

Reputation: 73

Setting background color of a table row

I have a table that stretches across the entire page.

I'm zebra striping using nth-child on the tr's to set the background of the row. The problem is that it is only coloring the cells and not the entire row. You can see white space in between each cell of the colored rows.

You can see an example here 

table {
    width: 100%;
}
tr:nth-child(even) {
    background: peachpuff;
}
<table>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>4</td>
            <td>0</td>
        </tr>
        <tr>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
        </tr>
        <tr>
            <td>7</td>
            <td>0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>0</td>
        </tr>
        <tr>
            <td>9</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

How do you change the background color of the entire row and not each individual cell?

Upvotes: 7

Views: 13249

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371073

The CSS solution to this uses the border-spacing and border-collapse properties.

Here's your table rule, updated:

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

It used to be that margin and padding in tables were primarily controlled in the HTML with the cellspacing and cellpadding attributes.

<table border="1" cellpadding="5" cellspacing="10"> ... </table>

But these attributes are now on a path to obsolescence. Use CSS.

Examples

table {
    border-collapse: separate;
    border-spacing: 5px;
}

td {
    padding: 5px;
}

To learn more about border-collapse see this article.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Upvotes: 1

Muhammad
Muhammad

Reputation: 7324

By default there is some spacing between the borders, to remove the spacing use 

table {
    border-collapse: collapse;
}

or 

table {
    border-spacing: 0;
}

the border-collapse: collapse will merge the borders of cells in to one border while border-spacing: 0 will decrease the space between the cells to show it as single border. I will prefer to use border-collapse because its purpose is to merge the borders into single border.

Upvotes: 0

dippas
dippas

Reputation: 60553

add border-collapse:collapse to table

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.

table {
    width: 100%;
    border-collapse:collapse;
}
tr:nth-child(even) {
    background: peachpuff;
}
<table>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>4</td>
            <td>0</td>
        </tr>
        <tr>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
        </tr>
        <tr>
            <td>7</td>
            <td>0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>0</td>
        </tr>
        <tr>
            <td>9</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

Upvotes: 12

sjm
sjm

Reputation: 5468

Add this to your HTML:

<table cellspacing="0">

Or via CSS

table {border-spacing: 0;}

Upvotes: 0

Related Questions