在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
当前回答
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
如果边距不起作用,请尝试将tr的显示设置为块,然后边距将起作用。
其他回答
对于那些想要非零单元格间距值的人,下面的CSS对我有用,但我只能在Firefox中测试它。
有关兼容性的详细信息,请参阅其他地方发布的Quirksmode链接。它似乎不适用于较旧的Internet Explorer版本。
table {
border-collapse: separate;
border-spacing: 2px;
}
此外,如果您希望cellspacing=“0”,请不要忘记在表的样式表中添加边框折叠:折叠。
只需对表数据使用CSS填充规则:
td {
padding: 20px;
}
对于边框间距:
table {
border-spacing: 1px;
border-collapse: collapse;
}
然而,由于box模型的diff实现,它可能会在旧版本的浏览器(如Internet Explorer)中产生问题。
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
如果边距不起作用,请尝试将tr的显示设置为块,然后边距将起作用。
假设我们希望以符合HTML5的方式为表分配10px的“cellpadding”和15px的“cellspacing”。我将在这里展示两种方法,给出非常相似的输出。
两组不同的CSS财产应用于表的相同HTML标记,但概念相反:
第一个使用边界折叠的默认值(单独),并使用边界间距提供单元间距,第二个选项将边界折叠切换为折叠,并使用border属性作为cellspacing。
在这两种情况下,cellpadding都是通过为tds指定padding:10px来实现的,在这两个情况下,为它们指定的背景色只是为了更清晰的演示。
第一种方法:
表{边框间距:15px}td{背景色:#00eb55;填充:10px;边框:0}<表><tr><td>标题1</td><td>标题2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
第二种方法:
表{边框塌陷:塌陷}td{背景色:#00eb55;填充:10px;边框:15px纯色#fff}<表><tr><td>标题1</td><td>标题2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>