在CSS中设置单元格填充和单元格间距？

在HTML表格中，单元格填充和单元格间距可以这样设置：

<table cellspacing="1" cellpadding="1">

如何使用CSS实现这一点？

当前回答

您可以使用CSS padding属性轻松地在表格单元格内设置填充。这是产生与表的cellpadding属性相同效果的有效方法。

桌子第，标准差{边框：1px实心#666；}表th，表td{填充：10px；/*应用单元格填充*/}<!DOCTYPE html><html lang=“en”><head><meta charset=“utf-8”><title>在CSS中设置Cellpadding</title></head><body><表><thead><tr><th>行</th><th>名字</th><th>姓氏</th><th>电子邮件</th></tr></thead><tbody><tr><td>1个</td><td>克拉克</td><td>肯特</td><td>clarkkent@mail.com</td></tr><tr><td>2个</td><td>彼得</td><td>帕克</td><td>peterparker@mail.com</td></tr><tr><td>3个</td><td>约翰</td><td>兰博</td><td>johnrambo@mail.com</td></tr></tbody></table></body></html>

类似地，您可以使用CSS边框间距属性来应用相邻表格单元格边框之间的间距，如cellspacing属性。但是，为了计算边界间距，边界塌陷属性的值必须是单独的，这是默认值。

表{边界塌陷：分离；边框间距：10px；/*应用单元格间距*/}桌子第，标准差{边框：1px实心#666；}表th，表td{填充：5px；/*应用单元格填充*/}<!DOCTYPE html><html lang=“en”><head><meta charset=“utf-8”><title>在CSS中设置单元格间距</title></head><body><表><thead><tr><th>行</th><th>名字</th><th>姓氏</th><th>电子邮件</th></tr></thead><tbody><tr><td>1个</td><td>克拉克</td><td>肯特</td><td>clarkkent@mail.com</td></tr><tr><td>2个</td><td>彼得</td><td>帕克</td><td>peterparker@mail.com</td></tr><tr><td>3个</td><td>约翰</td><td>兰博</td><td>johnrambo@mail.com</td></tr></tbody></table></body></html>

2017-08-02 09:52:32

其他回答

基础

为了控制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页面。

2010-07-09 02:34:02

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

2009-08-24 15:17:36

据我所知，在表格单元格上设置边距实际上没有任何效果。单元格间距的真正CSS等价物是边框间距，但它在Internet Explorer中不起作用。

您可以使用border-collapse:collapse将单元格间距可靠地设置为0，如前所述，但对于任何其他值，我认为唯一的跨浏览器方法是继续使用cellspacing属性。

2008-12-04 09:18:10

假设我们希望以符合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>

2021-02-27 19:06:16

根据我从W3C分类中了解到的，＜table＞是用于“仅”显示数据的。

基于此，我发现创建一个带有背景和所有背景的＜div＞并使用position:absolute创建一个数据浮动在上面的表要容易得多；背景：透明；。。。

它适用于Chrome、Internet Explorer（6及更高版本）和Mozilla Firefox（2及更高）。

边距用于（或意味着）在容器元素之间创建分隔符，如＜table＞、＜div＞和＜form＞，而不是＜tr＞、＜td＞、＜span＞或＜input＞。将其用于容器元素以外的任何其他内容都会使您忙于调整网站以适应未来的浏览器更新。

2012-07-02 13:43:15

在CSS中设置单元格填充和单元格间距？

推荐文章

最新文章

标签