How do I get padding between table cells, but not around the entire table?
I want to have a table with padding between each of the cells, but not around the outer edge cells, that is, not around the table itself.
Using:
border-collapse : separate;
border-spacing : 0.5em;
gives me padding everywhere, while using:
border-collapse : collapse;
gives no padding anywhere.
Attempting an alternate approach, I can get padding solely between the cells horizontally开发者_开发技巧 using a td + td
selector. However I can't use a tr + tr
selector because it seems tr
ignores margin, padding and border rules.
And, of course, padding on a plain td
selector applies to all cells, even the outer-edges of the outer cells.
This only has to work for current-generation browser - no IE 6 or 7 for me thank you very much. And I am not going to loose any sleep over IE 8, though it would be nice if that worked.
This isn't a perfect solution, as it uses padding instead of border spacing. Possibly it will work for your problem though.
HTML:
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
And the CSS:
table {
border: 1px red solid;
border-collapse: separate;
}
td {
background-color: green;
border: 1px black solid;
padding: 10px;
}
td:first-child {
padding-left: 0px;
}
td:last-child {
padding-right: 0px;
}
tr:first-child td {
padding-top: 0px;
}
tr:last-child td {
padding-bottom: 0px;
}
Produces:
Also on jsFiddle.
Can you fiddle with the markup to add .first to the first cell in a row and .last to the last, and I guess also to the first and last rows, and then pad appropriately?
精彩评论