在CSS中设置cellpadding和cellspacing吗？

在HTML表中，能够像这样设置cellpadding和cellspacing ：

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

使用CSS如何完成相同的工做？

---

#1楼

默认

浏览器的默认行为等效于：

table {border-collapse: collapse;}
td    {padding: 0px;}

细胞填充

设置单元格内容和单元格壁之间的空间量

table {border-collapse: collapse;}
td    {padding: 6px;}

细胞间隔

控制表格单元格之间的空间

table {border-spacing: 2px;}
td    {padding: 0px;}

都

table {border-spacing: 2px;}
td    {padding: 6px;}

二者（特殊）

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

注意：若是设置了border-spacing ，则表示表的border-collapse属性是separate 。

本身尝试！

在这里，您能够找到实现此目标的旧HTML方法。

---

#2楼

用div包裹单元格的内容，您能够作任何想作的事，可是必须将每一个单元格包裹在列中才能得到统一的效果。 例如，要得到更大的左右边距：

所以CSS将

div.cellwidener { margin: 0px 15px 0px 15px; } td.tight { padding: 0px; }

<table border="0"> <tr> <td class="tight"> <div class="cellwidener">My content</div> </td> </tr> </table>

是的，这很麻烦。 是的，它能够与Internet Explorer一块儿使用。 实际上，我仅使用Internet Explorer进行了测试，由于这是咱们容许在工做中使用的所有。

---

#3楼

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

基于此，我发现建立一个具备背景和全部背景的<div>并使其具备一个position: absolute;浮动数据的表要容易position: absolute; background: transparent; ...

它能够在Chrome，Internet Explorer（6和更高版本）和Mozilla Firefox（2和更高版本）上运行。

边距用于（或始终意味着）在容器元素（例如<table> ， <div>和<form> ）之间建立间隔符，而不是<tr> ， <td> ， <span>或<input> 。 将其用于除容器元素以外的任何其余内容，将使您忙于调整网站以供未来浏览器更新。

---

#4楼

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

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

---

#5楼

我用!important在边框崩溃以后像

border-collapse: collapse !important;

它在IE7中对我有用。 彷佛覆盖了cellpacing属性。