在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
在HTML表格中,单元格填充和单元格间距可以这样设置:
<table cellspacing="1" cellpadding="1">
如何使用CSS实现这一点?
当前回答
据我所知,在表格单元格上设置边距实际上没有任何效果。单元格间距的真正CSS等价物是边框间距,但它在Internet Explorer中不起作用。
您可以使用border-collapse:collapse将单元格间距可靠地设置为0,如前所述,但对于任何其他值,我认为唯一的跨浏览器方法是继续使用cellspacing属性。
其他回答
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
我用过!在边境崩溃后很重要
border-collapse: collapse !important;
它在IE7中对我有用。它似乎覆盖了cellspacing属性。
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
如果边距不起作用,请尝试将tr的显示设置为块,然后边距将起作用。
这个问题的简单解决方案是:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
假设我们希望以符合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>