在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
当前回答
只需对表数据使用CSS填充规则:
td {
padding: 20px;
}
对于边框间距:
table {
border-spacing: 1px;
border-collapse: collapse;
}
然而,由于box模型的diff实现,它可能会在旧版本的浏览器(如Internet Explorer)中产生问题。
其他回答
试试看:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
或者试试这个:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
此外,如果您希望cellspacing=“0”,请不要忘记在表的样式表中添加边框折叠:折叠。
据我所知,在表格单元格上设置边距实际上没有任何效果。单元格间距的真正CSS等价物是边框间距,但它在Internet Explorer中不起作用。
您可以使用border-collapse:collapse将单元格间距可靠地设置为0,如前所述,但对于任何其他值,我认为唯一的跨浏览器方法是继续使用cellspacing属性。
我用过!在边境崩溃后很重要
border-collapse: collapse !important;
它在IE7中对我有用。它似乎覆盖了cellspacing属性。
违约
浏览器的默认行为相当于:
table {border-collapse: collapse;}
td {padding: 0px;}
单元格填充
设置单元格内容与单元格墙之间的空间量
table {border-collapse: collapse;}
td {padding: 6px;}
单元格间距
控制表格单元格之间的间距
table {border-spacing: 2px;}
td {padding: 0px;}
Both
table {border-spacing: 2px;}
td {padding: 6px;}
两者(特殊)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
注意:如果设置了边框间距,则表示表的边框折叠属性是单独的。
自己试试吧!
在这里,您可以找到实现这一点的旧HTML方法。