在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
当前回答
此样式用于表格的完全重置-单元格填充、单元格间距和边框。
我的reset.css文件中有这样的样式:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
其他回答
此黑客适用于Internet Explorer 6及更高版本、Google Chrome、Firefox和Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
*声明适用于Internet Explorer 6和7,其他浏览器将正确忽略它。
expression('separate',cellSpacing='10px')返回'separate',但这两个语句都运行,因为在JavaScript中,您可以传递比预期更多的参数,所有参数都将被求值。
此样式用于表格的完全重置-单元格填充、单元格间距和边框。
我的reset.css文件中有这样的样式:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
用div包装单元格的内容,你可以做任何你想做的事情,但你必须将每个单元格包装在一列中,以获得统一的效果。例如,要获得更宽的左右边距:
因此CSS将是,
div.cell加宽器{边距:0px 15px 0px 15像素;}时差{填充:0px;}<table border=“0”><tr><td class=“紧”><div class=“cellwider”>我的内容</div></td></tr></table>
是的,这很麻烦。是的,它适用于Internet Explorer。事实上,我只在Internet Explorer上测试过这一点,因为这是我们在工作中允许使用的全部功能。
据我所知,在表格单元格上设置边距实际上没有任何效果。单元格间距的真正CSS等价物是边框间距,但它在Internet Explorer中不起作用。
您可以使用border-collapse:collapse将单元格间距可靠地设置为0,如前所述,但对于任何其他值,我认为唯一的跨浏览器方法是继续使用cellspacing属性。