问题描述
||
我正在寻找有关表格单元格之间间距的提示。我知道
HTML中的
cellspacing
/ѭ1and及其等同于CSS的border-spacing
/ѭ3they,但是按他们的名字做时,他们所做的比我期望的要多。我要实现的是该术语所隐含的单元间距:仅单元之间的间距,而不是单元与其周围的任何元素之间的间距。
这是一张图片,显示我的意思:
简而言之,我不需要红色箭头(即单元格和表格之间)所描绘的间距,但我确实希望两个相邻单元格之间的间距。是否有任何“简便”方法,还是我需要乏味的方法来为“边界”单元格与“内部”单元格分配不同的符号?
解决方法
一个一直对我有用的简单解决方案(即使在IE中也是如此)是使表的负4大小与2大小相同。
快速而肮脏的示例:http://jsfiddle.net/rBkPQ/
,试试这个:http://jsfiddle.net/dBSWV/
IE8不支持
:last-child
,因此,如果您需要IE6来工作,则需要使用ѭ7add并添加一个a8ѭ类。
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>
,可能是这样的:http://jsfiddle.net/H37BG/6/
虚线边框是表格边框,您可以将其设置为无。 :)