在CSS中设置cellpadding和cellspacing？

时间：2008-12-04 08:45:47

标签： html css html-table alignment

在HTML表格中，cellpadding和cellspacing可以这样设置：

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

如何使用CSS完成同样的工作？

30 个答案:

答案 0 :(得分：3418)

<强>基本

为了控制CSS中的“cellpadding”，您可以在表格单元格上使用padding。例如。 10px的“cellpadding”：

td { 
    padding: 10px;
}

对于“cellspacing”，您可以将border-spacing CSS属性应用于表格。例如。对于10px的“cellspacing”：

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

这个属性甚至可以允许单独的水平和垂直间距，这是旧学校“cellspacing”无法做到的。

IE中的问题＆lt; = 7

这将适用于几乎所有流行的浏览器，除了Internet Explorer通过Internet Explorer 7，你几乎没有运气。我说“差不多”，因为这些浏览器仍支持border-collapse属性，该属性合并相邻表格单元格的边框。如果您正在尝试消除cellspacing（即cellspacing="0"），那么border-collapse:collapse应该具有相同的效果：表格单元格之间没有空格。但是，这种支持是错误的，因为它不会覆盖表元素上的现有cellspacing HTML属性。

简而言之：对于非Internet Explorer 5-7浏览器，border-spacing会处理您。对于Internet Explorer，如果您的情况恰到好处（您希望0个cellspacing并且您的表尚未定义它），则可以使用border-collapse:collapse。

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注意：要详细了解可以应用于表格和适用于哪些浏览器的CSS属性，请参阅此fantastic Quirksmode page。

答案 1 :(得分：905)

默认

浏览器的默认行为相当于：

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

Enter image description here

CELLPADDING

设置单元格内容与单元格墙之间的间距

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

Enter image description here

CELLSPACING

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

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

Enter image description here

两个

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

Enter image description here

两者（特殊）

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

Enter image description here

  

注意：如果设置了border-spacing，则表示该表的border-collapse属性为separate。

Try it yourself!

Here您可以找到实现此目标的旧HTML方式。

答案 2 :(得分：330)

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

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

答案 3 :(得分：112)

据我所知，设置表格单元格的边距并没有任何影响。 cellspacing的真正CSS等价物是border-spacing - 但它在Internet Explorer中不起作用。

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

答案 4 :(得分：95)

此hack适用于Internet Explorer 6及更高版本，Google Chrome，Firefox和Opera：

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*声明适用于Internet Explorer 6和7，其他浏览器会正确忽略它。

expression('separate', cellSpacing = '10px')返回'separate'，但两个语句都在运行，因为在JavaScript中你可以传递比预期更多的参数，并且所有参数都将被评估。

答案 5 :(得分：70)

对于那些想要非零单元间距值的人，以下CSS对我有用，但我只能在Firefox中测试它。

有关兼容性的详细信息，请参阅Quirksmode链接posted elsewhere。它似乎不适用于较旧的Internet Explorer版本。

table {
    border-collapse: separate;
    border-spacing: 2px;
}

答案 6 :(得分：52)

这个问题的简单解决方案是：

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

答案 7 :(得分：47)

另外，如果您想要cellspacing="0"，请不要忘记在border-collapse: collapse的样式表中添加table。

答案 8 :(得分：42)

使用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对它进行了测试，因为我们只允许在工作中使用它。

答案 9 :(得分：23)

只需使用border-collapse: collapse表格，padding表示th或td。

答案 10 :(得分：21)

TBH。对于所有使用CSS的人来说，您也可以使用cellpadding="0" cellspacing="0"，因为它们不会被弃用...

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

答案 11 :(得分：21)

此格式适用于表格完全重置 - cellpadding ， cellspacing 和边框。

我的reset.css文件中有这种风格：

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

答案 12 :(得分：18)

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

答案 13 :(得分：17)

只需将CSS填充规则与表格数据一起使用： 

td { 
    padding: 20px;
}

对于边框间距：

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

但是，由于盒子模型的差异化实现，它可能会在Internet Explorer等旧版本的浏览器中出现问题。

答案 14 :(得分：16)

根据我对W3C分类的理解，<table>仅用于“显示数据”。

基于此，我发现使用背景和所有内容创建<div>要轻松得多，并使用position: absolute;和background: transparent;将数据浮动在其上的表格...

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

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

答案 15 :(得分：13)

CSS：

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

答案 16 :(得分：10)

试试这个：

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或试试这个：

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

答案 17 :(得分：9)

我在边框崩溃后使用了!important，如

border-collapse: collapse !important;

它在IE7中适用于我。它似乎覆盖了cellspacing属性。

答案 18 :(得分：9)

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

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

同样，您可以使用CSS border-spacing属性来应用相邻表格单元格边框之间的间距，例如cellspacing属性。但是，为了处理边界间距，border-collapse属性值的值是单独的，这是默认值。

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

答案 19 :(得分：8)

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
可以通过cell-padding在CSS中提供

padding，同时可以通过为表格设置cell-spacing来设置border-spacing。

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle

答案 20 :(得分：6)

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

如果margin无效，请尝试将display tr设置为block，然后保证金将有效。

答案 21 :(得分：5)

对于表格，在HTML 5中，cellspacing和cellpadding已经过时。

现在对于cellspacing，你必须使用border-spacing。对于cellpadding，你必须使用border-collapse。

并确保您不在HTML5代码中使用此功能。始终尝试在CSS 3文件中使用这些值。

答案 22 :(得分：4)

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

答案 23 :(得分：3)

在HTML表格中，cellpadding和cellspacing可以这样设置：

cell-padding ：

只需调用简单的td/th单元格padding。

示例： 

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}
<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

单元格间距

只需致电简单table border-spacing

即可

示例： 

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}
<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

CSS源链接here you get more table style by CSS的更多表格样式。

答案 24 :(得分：3)

您可以使用border-spacing和padding在CSS中执行此类操作：

＆＃13;
＆＃13; 
table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
＆＃13; 
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 25 :(得分：2)

这对我有用

表{border-collapse：崩溃}

表th，表td {填充：0}

答案 26 :(得分：1)

您可以检查以下代码，只需创建一个index.html并运行它即可。 

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-spacing: 10px;
    }
    
    td {
      padding: 10px;
    }
  </style>
</head>

<body>
  <table cellspacing="0" cellpadding="0">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</body>

</html>

输出：

enter image description here

答案 27 :(得分：0)

如何直接将样式添加到表格本身？这不是在您的CSS中使用table，如果您的网页上有多个表格，则为 BAD 方法：

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

答案 28 :(得分：0)

我建议这样做，并且特定表的所有单元格都会受到影响。 

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

答案 29 :(得分：0)

假设我们想以符合 HTML5 的方式为我们的表格分配一个 10 像素的“单元格填充”和一个 15 像素的“单元格间距”。我将在这里展示两种提供非常相似输出的方法。

两组不同的 CSS 属性适用于表格的相同 HTML 标记，但具有相反的概念：

  • 第一个使用 border-collapse (separate) 的默认值并使用 border-spacing 提供单元格间距，

  • 第二个将 border-collapse 切换为 collapse 并使用 border 属性作为单元格间距。

在这两种情况下，cellpadding 都是通过将 padding:10px 分配给 td 来实现的，在这两种情况下，分配给它们的 background-color 只是为了更清晰的演示.

第一种方法：

table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

第二种方法：

table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

相关问题
最新问题