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

Posted 2023-03-06

技术标签:

【中文标题】在 CSS 中设置单元格填充和单元格间距？【英文标题】：Set cellpadding and cellspacing in CSS? 【发布时间】：2010-09-25 07:00:15 【问题描述】：

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

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

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

【问题讨论】：

只是一个一般性建议，在尝试这些解决方案之前，请检查您的 style.css 是否对您的表进行了“重置”。示例：如果您没有将表设置为 width:auto，那么 border-collapse 可能无法按预期工作。在表格上使用边框间距并在 td 上使用填充。 “哦，该死，在过去我用cellpadding 和cellspacing 做这个......又是什么CSS？” –我，几乎每次我都需要这样做。 【参考方案1】：

基础知识

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

td  
    padding: 10px;

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

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

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

IE ≤ 7 中的问题

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

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

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

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

【讨论】：

cellpadding="0" 仍然可以在 Chrome 13.0.782.215 中发挥作用，即使将border-collapse:collapse 和border-spacing 应用于表格。 @LeeWhitney 您需要在表格单元格上设置 padding: 0。这有点离题了，但是在 HTML5 中删除了 cellpadding 和 cellspacing 属性，所以 CSS 是现在唯一的方法。大家好。为了清楚起见，我更新了答案，包括关于单元格填充的部分，我认为这很明显（只需使用“填充”）。希望它现在更有用。真的，@vapcguy，在任何无限变化的其他情况下，您可能会在其中设置表格样式，您将需要定义更具体的选择器。以上标记为示例。【参考方案2】：

默认

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

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。

Try it yourself!

Here你可以找到实现这一点的旧 HTML 方法。

【讨论】：

桌子周围的间距怎么消失了？当我设置“border-spacing: 8px 12px, 它不仅增加了表格边框和外部单元格之间的间距，而且还增加了表格边框和外部单元格之间的间距！但这在此处的图像中没有显示；它们是向左对齐的。 @2astalavista 不幸的是，如果有人想删除外部间距的效果，那么这些 CSS 属性将无法以这种方式工作。 @Kaz 你可能需要使用负边距来隐藏那个烦人的部分。 TD 上的默认内边距通常是 1px，而不是 0 当心：border-spacing:horizontal vertical; 而例如padding:vertical horizontal;。【参考方案3】：

table

    border-collapse: collapse; /* 'cellspacing' equivalent */


table td, table th

    padding: 0; /* 'cellpadding' equivalent */

【讨论】：

相当于cellspacing=0。 cellspacing=1 的等效项完全不同。查看接受的答案。【参考方案4】：

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

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

【讨论】：

在当今这个时代，现实已经被吸到了 N 级。这几乎是正确的，但如果表还没有定义cellspacing 属性，border-collapse 仅适用于 IE 5-7。我已经写了一个全面的答案，它合并了此页面上其他答案的所有正确部分，以防万一。【参考方案5】：

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

【讨论】：

【参考方案6】：

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

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

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

【讨论】：

【参考方案7】：

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

table

    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;

table td

    padding: 8px 8px;

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

只需将border-collapse: collapse 用于您的表，将padding 用于th 或td。

【讨论】：

【参考方案11】：

此样式适用于完全重置表格 - cellpadding、cellspacing和borders。

我的 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】：

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

其他任何人在<td> 上建议边距显然没有尝试过。

【讨论】：

它们实际上在 html5 中已被弃用。【参考方案13】：

table th,td 
    padding: 8px 2px;

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

【讨论】：

【参考方案14】：

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

td  
    padding: 20px;

对于边框间距：

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

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

【讨论】：

【参考方案15】：

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

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

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

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

【讨论】：

【参考方案16】：

CSS：

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

【讨论】：

【参考方案17】：

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

【讨论】：

【参考方案18】：

试试这个：

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

table td, table th 
    padding: 10px;

或者试试这个：

table 
    border-collapse: collapse;

table td, table th 
    padding: 10px;

【讨论】：

【参考方案19】：

我在边框折叠后使用!important

border-collapse: collapse !important;

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

【讨论】：

!important 只需要在复杂情况下覆盖 其他 CSS 设置（即使这样也大多是错误的方法）。【参考方案20】：

<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.

【讨论】：

【参考方案21】：

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

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

【讨论】：

【参考方案22】：

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

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

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

【讨论】：

【参考方案23】：

table 
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 

td 
    padding-left: 4px;

【讨论】：

【参考方案24】：

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

对于单元格填充：

只需调用简单的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;

对于单元格间距

只需调用简单的tableborder-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.

【讨论】：

【参考方案25】：

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

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

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

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

在这两种情况下，单元格填充是通过将padding:10px 分配给tds 来实现的，在这两种情况下，分配给它们的background-color 只是为了更清晰的演示。

第一种方法：

tableborder-spacing:15px
tdbackground-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>

第二种方法：

tableborder-collapse:collapse
tdbackground-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>

【讨论】：

【参考方案26】：

您可以在 CSS 中简单地使用border-spacing 和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>

【讨论】：

【参考方案27】：

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

输出：

【讨论】：

【参考方案28】：

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

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

【讨论】：

将“style”放在表格标签中比将“table#someId”放在你的css中更糟糕，因为样式应该与内容分开。但问题的重点是如何将弃用的 html 转换为正确的 css。你做对了，但你并没有真正在你的答案中添加任何东西，而是专注于一个不相关的问题。什么都没加？！我添加的是关注这里的所有其他答案基本上是如何使用 td padding: ... 或 table border-spacing: ... ，而不是直接将其应用于表格。那些什么都没有。正如我所说，当您的页面上有多个表格并且不想影响它们时，您不想这样做！我们不需要一整页的答案说“使用样式表！”，当这可能是你想要的最后一件事时，因为你只想要一个单元格或表格的格式。那时将其应用于 table 或 td 是不可取的，并且为它创建一个全新的类是矫枉过正的。所有其他答案都使用样式表，因为最初的问题是“我如何使用 css 做到这一点”。如果问题是“我怎样才能让 css 只影响这张表”，那么你的回答会更合适（尽管我仍然赞成table#someId）。从技术上讲，内联样式仍然是 CSS，只是不使用样式表，但我明白你的意思。因为类背后的想法是为了可重用性。恕我直言，一次性的，这没有什么意义，而且是矫枉过正。【参考方案29】：

这对我有用：

table border-collapse: collapse
table th, table td padding: 0

【讨论】：

【参考方案30】：

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

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

【讨论】：

以上是关于在 CSS 中设置单元格填充和单元格间距？的主要内容，如果未能解决你的问题，请参考以下文章

在 QTreeWidget 中设置编辑器宽度以填充单元格

iOS - 设置为 0 时 UICollectionView 间距仍然存在 - 如何设置单元格之间没有间距

如何在 UITableViewController 中设置静态单元格的自动高度？

Css中控制table单元格的间距

如何在 PyQt5 中设置 QTableWidget 的单元格样式？

Excel中设置下拉菜单并填充不同颜色