<\/script>')
Geek Answers Handbook

Css - table row background color fills all spaces

I have an html table that looks like this:

<table style="border-spacing: 10px"> <tr style='background-color:red'> <td><b>Member</b></td> <td><b>Account #</b></td> <td><b>Site</b></td> <td><b>Date</b></td> </tr> </table>

The padding between the elements is fine, but the background color seems to fill only TD and leaves a lot of spaces due to padding / spacing. How to make the background color TR fill the entire line and flow through the interval between the borders of 10px?

+6
source share
3 answers

Use border-collapse:collapse; to collapse the gaps and add any addition you need:

 table { border-collapse:collapse; } td { padding: 8px; }

JsFiddle example

+12
source

Apply the background to table not to tr :

 <table style="border-spacing: 10px; background-color:red;"> <tr style=''> <td><b>Member</b></td> <td><b>Account #</b></td> <td><b>Site</b></td> <td><b>Date</b></td> </tr> </table>

http://jsfiddle.net/helderdarocha/C7NBy/

0
source

You can do the following:

1) HTML + CSS

 <!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; /*this is by default value of border-collapse property*/ border-spacing: 0px; /*this will remove unneccessary white space between table cells and between table cell and table border*/ } th,td { background-color: red; padding: 5px; } </style> </head> <body> <table> <tr> <td><b>Member</b></td> <td><b>Account #</b></td> <td><b>Site</b></td> <td><b>Date</b></td> </tr> </table> </body> </html>

Or

2) HTML + CSS

 <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } th,td { background-color: red; padding: 5px; } </style> </head> <body> <table> <tr> <td><b>Member</b></td> <td><b>Account #</b></td> <td><b>Site</b></td> <td><b>Date</b></td> </tr> </table> </body> </html>

And if you need to make all the entries in the table bold, you can do the following:

 <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } th,td { background-color: red; padding: 5px; font-weight: bold; } </style> </head> <body> <table> <tr> <td>Member</td> <td>Account #</td> <td>Site</td> <td>Date</td> </tr> </table> </body> </html>
0
source

More articles:


All Articles