在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
当前回答
基础
为了控制CSS中的“cellpadding”,您可以简单地在表单元格上使用padding。例如,对于10px的“cellpadding”:
td {
padding: 10px;
}
对于“cellspacing”,可以将border-spacing CSS属性应用于表。例如,对于10px的“单元间距”:
table {
border-spacing: 10px;
border-collapse: separate;
}
该属性甚至允许单独的水平和垂直间距,这是老式“cellspacing”无法做到的。
IE中的问题≤7
这几乎适用于所有流行的浏览器,除了Internet Explorer到Internet Explorer 7,在那里你几乎没有运气。我说“几乎”是因为这些浏览器仍然支持边界折叠属性,该属性合并相邻表单元格的边界。如果您试图消除cellspacing(即cellspacing=“0”),那么边框折叠:折叠应该具有相同的效果:表单元格之间没有空格。但是,这种支持有缺陷,因为它不会覆盖表元素上现有的cellspacingHTML属性。
简而言之:对于非Internet Explorer 5-7浏览器,边框间距可以控制您。对于Internet Explorer,如果您的情况正好(您需要0个单元格间距,而您的表尚未定义它),则可以使用边框折叠:折叠。
table {
border-spacing: 0;
border-collapse: collapse;
}
注意:有关可以应用于表以及适用于哪些浏览器的CSS财产的详细概述,请参阅这个奇妙的Quirksmode页面。
其他回答
这个问题的简单解决方案是:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
试试看:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
或者试试这个:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
对于那些想要非零单元格间距值的人,下面的CSS对我有用,但我只能在Firefox中测试它。
有关兼容性的详细信息,请参阅其他地方发布的Quirksmode链接。它似乎不适用于较旧的Internet Explorer版本。
table {
border-collapse: separate;
border-spacing: 2px;
}
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
据我所知,在表格单元格上设置边距实际上没有任何效果。单元格间距的真正CSS等价物是边框间距,但它在Internet Explorer中不起作用。
您可以使用border-collapse:collapse将单元格间距可靠地设置为0,如前所述,但对于任何其他值,我认为唯一的跨浏览器方法是继续使用cellspacing属性。