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

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

如何使用CSS实现这一点?


当前回答

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

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

此外,如果您希望cellspacing=“0”,请不要忘记在表的样式表中添加边框折叠:折叠。

待定。对于所有使用CSS的问题,您最好只使用cellpadding=“0”cellspacing=“0“,因为它们没有被弃用。。。

显然,任何其他建议<td>利润的人都没有尝试过这一点。

根据我从W3C分类中了解到的,<table>是用于“仅”显示数据的。

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

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

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

您可以使用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>