How can I add margin (not padding) between table rows, without also adding it between the columns?
| SitePoint Sponsor |
How can I add margin (not padding) between table rows, without also adding it between the columns?
<table cellspacing="3" ...
Or are you looking for CSS only?
I would use margin-top margin-bottom for the TR tag (I think it should work)
cellspacing introduces "margin" all around the cell. I want just to the bottom.
Unfortunately margin-bottom for the TR (or even TD) tag has no effect
Hi,
You can't apply margins to table rows or td's I'm afraid. You could apply a border to the tr's in firefox which would give some spacing but it won't work in IE.
I think the only cross browser way to do this is to use nested tables (god forbid).
Assuming this is tabular data then something like this.
Although I suspect that the method above won't be much use if the cell widths are dependent on content.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> table{ width:50%; padding:0; border-collapse:collapse; text-align:center; } table table{width:100%} td{ padding:5px 0;} td td{padding:0;border:1px solid #000} </style> </head> <body> <table> <tr> <td><table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table></td> </tr> <tr> <td><table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></td> </tr> <tr> <td><table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></td> </tr> <tr> <td><table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></td> </tr> <tr> <td><table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></td> </tr> </table> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Seems strange that with CSS you can have such a fine control on most things but it is impossible to add some margin on a row.
Thanks for your help
You can use border-spacing but it isn't supported by IE so its not much use at the moment.Seems strange that with CSS you can have such a fine control on most things
e.g.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> table { border-collapse:separate; padding:0; width:50%; border-spacing:0 10px; } td,th { border:1px solid #000; border-right:none; } td:last-child,th:last-child{border:1px solid #000;} </style> </head> <body> <table> <tr> <th scope="col">1</th> <th scope="col">2</th> <th scope="col">3</th> <th scope="col">4</th> <th scope="col">5</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Thanks Paul. I guess I will just use some html hack for now.You can use border-spacing but it isn't supported by IE so its not much use at the moment.
Posting Permissions
Bookmarks