3553

在 HTML 表格中，cellpaddingandcellspacing可以这样设置：

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

如何使用 CSS 实现相同的功能？

4

30 回答 30

3772

基本

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

td { 
    padding: 10px;
}

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

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

此属性甚至允许单独的水平和垂直间距，这是老式的“单元格间距”无法做到的。

IE 中的问题 ≤ 7

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

简而言之：对于非 Internet Explorer 5-7 浏览器，border-spacing处理您。对于 Internet Explorer，如果您的情况恰到好处（您想要 0 个单元格间距并且您的表格尚未定义它），您可以使用border-collapse:collapse.

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

注意：有关可以应用于表格以及适用于哪些浏览器的 CSS 属性的详细概述，请参阅这个奇妙的 Quirksmode 页面。

于 2010-07-09T02:34:02.337 回答
1003

默认

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

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 方法。

于 2012-06-12T10:24:17.730 回答
362 
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
于 2009-08-24T15:17:36.447 回答
121

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

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

于 2008-12-04T09:18:10.377 回答
106

此 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 中，您可以传递比预期更多的参数，并且所有这些都将被评估。

于 2011-12-05T04:30:39.990 回答
71

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

有关兼容性的详细信息，请参阅其他地方发布的Quirksmode链接。似乎它可能不适用于较旧的 Internet Explorer 版本。

table {
    border-collapse: separate;
    border-spacing: 2px;
}
于 2011-08-20T03:32:59.350 回答
54

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

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}
于 2011-12-08T16:04:01.137 回答
50

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

于 2008-12-04T09:06:50.307 回答
45

用 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 对此进行了测试，因为这是我们在工作中被允许使用的全部内容。

于 2012-06-19T14:57:56.423 回答
24

只需border-collapse: collapse用于您的桌子和padding用于th或td。

于 2014-01-03T03:12:02.537 回答
22

此样式用于完全重置表格-单元格填充、单元格间距和边框。

我的 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 */
}
于 2014-04-28T15:08:06.587 回答
20

待定。对于所有喜欢使用 CSS 的人，您不妨只使用cellpadding="0" cellspacing="0"它们，因为它们并未被弃用……

其他任何建议<td>'s 的边距的人显然都没有尝试过。

于 2010-02-26T11:25:10.620 回答
18 
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
于 2014-01-08T18:16:33.287 回答
17

只需对表格数据使用 CSS 填充规则： 

td { 
    padding: 20px;
}

对于边框间距：

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

但是，由于盒子模型的不同实现，它可能会在旧版本的浏览器（如 Internet Explorer）中产生问题。

于 2014-03-15T22:33:41.310 回答
15

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

基于此，我发现<div>使用背景和所有内容创建一个表格并使用position: absolute;和background: transparent;...

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

边距用于（或无论如何）在容器元素之间创建间隔，例如<table>,<div>和<form>, not <tr>, <td>, <span>or <input>。将它用于容器元素以外的任何东西都会让您忙于调整您的网站以适应未来的浏览器更新。

于 2012-07-02T13:43:15.890 回答
13

CSS：

selector{
    padding:0 0 10px 0; // Top left bottom right 
}
于 2014-02-27T09:03:37.853 回答
12

您可以使用 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 边框间距属性来应用相邻表格单元格边框之间的间距，例如 cellspacing 属性。但是，为了使边框间距起作用，边框折叠属性的值必须分开，这是默认设置。

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>

于 2017-08-02T09:52:32.293 回答
11

试试这个：

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

或者试试这个：

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
于 2013-06-14T05:51:42.133 回答
9

我!important在边框折叠后使用

border-collapse: collapse !important;

它在 IE7 中对我有用。它似乎覆盖了 cellspacing 属性。

于 2013-02-14T15:41:57.637 回答
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可以padding在 CSS 中给出，而cell-spacing可以通过设置border-spacing表来设置。

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

小提琴。

于 2016-07-03T13:33:59.523 回答
6 
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

如果margin不起作用，请尝试设置display为tr，block然后边距将起作用。

于 2014-12-24T13:33:01.780 回答
5

对于表格，单元格间距和单元格填充在 HTML 5 中已过时。

现在对于单元格间距，您必须使用边框间距。对于单元格填充，您必须使用边框折叠。

并确保不要在 HTML5 代码中使用它。始终尝试在 CSS 3 文件中使用这些值。

于 2016-06-03T12:03:26.320 回答
5 
table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}
于 2016-09-05T07:25:41.863 回答
5

在 HTML 表格中，cellpaddingandcellspacing可以这样设置：

对于单元格填充：

只需调用简单的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 源链接的表格样式在这里您可以通过 CSS 获得更多表格样式。

于 2016-11-02T06:58:13.523 回答
4

假设我们想以 HTML5 兼容的方式为我们的表格分配一个 10px 的“cellpadding”和一个 15px 的“cellspacing”。我将在这里展示两种提供非常相似输出的方法。

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

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

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

在这两种情况下，单元格填充都是通过分配padding:10px给tds 来实现的，在这两种情况下，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>

于 2021-02-27T19:06:16.000 回答
3

你可以简单地在你的 CSS 中做这样的事情，使用border-spacingand padding：

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<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>

于 2017-06-09T16:58:06.197 回答
2

您可以检查以下代码，只需创建一个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>

输出 ：

在此处输入图像描述

于 2020-03-05T09:24:39.397 回答
0

将样式直接添加到表格本身怎么样？这不是table在您的 CSS中使用，如果您的页面上有多个表格，这是一种不好的方法：

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
于 2015-02-26T05:30:28.393 回答
0

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

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px;
 }
于 2019-11-17T05:09:20.190 回答
0

这对我有用：

table {border-collapse: collapse}
table th, table td {padding: 0}
于 2020-12-12T10:25:45.850 回答