I'm looking for hints regarding the spacing between table cells. I'm aware of
cellspacing
/ ce开发者_如何转开发llpadding
in HTML and their CSS equivalents border-spacing
/ padding
, but they're doing more that what I would expect when going by their names. What I want to achieve is cellspacing as implied by the term: the spacing solely between cells, not between a cell and any element surrounding it.
Here's a picture to show what I mean:
In short, I don't want the spacing as depicted by the red arrows (that is, between cell and table) yet I do desire the spacing between two adjacent cells. Is there any 'easy' way to this, or do I need to go the tedious way of assigning different syles to the 'bordering' cells vs. the 'interior' cells?
A simple solution, that has always worked for me (even in IE) is to give the table a negative margin
the same size as the border-spacing
.
Quick and dirty sample: http://jsfiddle.net/rBkPQ/
Try this: http://jsfiddle.net/dBSWV/
IE8 doesn't support :last-child
, so if you need it to work there, you'll need to use for example tr.last > td > div
and add a .last
class.
table {
border: 1px solid red
}
td > div {
border: 1px solid #000;
margin: 5px
}
tr:first-child > td > div {
margin-top: 0
}
tr:last-child > td > div {
margin-bottom: 0
}
td:first-child > div {
margin-left: 0
}
td:last-child > div {
margin-right: 0
}
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div>Content 1</div></td>
<td><div>Content 2</div></td>
<td><div>Content 3</div></td>
</tr>
..
</table>
Maybe like this: http://jsfiddle.net/H37BG/6/
Dashed border is table border which you can set to none. :)
精彩评论