Geek Answers Handbook

Setting table row background color

I have a table that extends the entire page.

I alternate the zebra using nth-child in tr to set the background strings. The problem is that this is just the coloring of the cells, not the whole line. You can see the space between the cells of the colored rows.

Here you can see an example.

 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 to change the background color of the entire row, and not each individual cell?

+5
source share
4 answers

add border-collapse:collapse to table

The CSS property with border collapse determines whether the table border is split or collapsed. In a separate model, neighboring cells each have their own boundaries. In a collapsed model, adjacent table cells share borders.

A split model is a traditional HTML table border model. Adjacent cells have their own borders. The distance between them specified by the border-spacing property.

In a model with a folded border, adjacent cells in the table share borders. In this model, the value of the border-style insert behaves like a groove, and the beginning behaves like a comb.

 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>
+6
source

This CSS solution uses the border-spacing and border-collapse properties.

Here is your table rule, updated:

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

It used to be that margin and table filling were mostly controlled in HTML with the attributes cellspacing and cellpadding .

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

But these attributes are now obsolete. Use CSS.

Examples

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

For more on border-collapse see this article.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

+1
source

Add this to your HTML:

 <table cellspacing="0">

Or through CSS

 table {border-spacing: 0;}
0
source

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

 table { border-collapse: collapse; }

or

 table { border-spacing: 0; }

border-collapse: collapse merge the cell borders into one border, and border-spacing: 0 will reduce the space between cells to show it as a single border. I would prefer to use border-collapse because its goal is to combine borders into one border.

0
source

More articles:


All Articles