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

Set cellpadding and cellspacing in CSS?

提问by kokos

In an HTML table, the cellpaddingand cellspacingcan be set like this:

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

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

How can the same be accomplished using CSS?

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

回答by Eric Nguyen

Basics

基本

For controlling "cellpadding" in CSS, you can simply use paddingon table cells. E.g. for 10px of "cellpadding":

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

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacingCSS property to your table. E.g. for 10px of "cellspacing":

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

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

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

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

Issues in IE <= 7

IE <= 7 中的问题

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapseproperty, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapseshould have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacingHTML attribute on the table element.

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

In short: for non-Internet Explorer 5-7 browsers, border-spacinghandles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

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

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

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

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

回答by kokos

Default

默认

The default behavior of the browser is equivalent to:

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

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

         

         

Cellpadding

单元格填充

Sets the amount of space between the contents of the cell and the cell wall

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

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

        

        

Cellspacing

细胞间距

Controls the space between table cells

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

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

        

        

Both

两个都

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

        

        

Both (special)

两者（特殊）

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

        

        

Note:If there is border-spacingset, it indicates border-collapseproperty of the table is separate.

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

Try it yourself!

自己试试吧！

Hereyou can find the old HTML way of achieving this.

在这里您可以找到实现此目的的旧 HTML 方式。

回答by Pup

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

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

回答by Will Prescott

Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacingis border-spacing- but it doesn't work in Internet Explorer.

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

You can use border-collapse: collapseto reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacingattribute.

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

回答by Vitalii Fedorenko

This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:

此 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 */
}

The *declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.

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

expression('separate', cellSpacing = '10px')returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.

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

回答by Malvineous

For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.

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

See the Quirksmodelink posted elsewherefor compatibility details. It seems it may not work with older Internet Explorer versions.

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

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

回答by George Filippakos

The simple solution to this problem is:

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

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

回答by mat

Also, if you want cellspacing="0", don't forget to add border-collapse: collapsein your table's stylesheet.

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

回答by Robert White

Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:

用div包裹单元格的内容，你可以做任何你想做的事情，但你必须将每个单元格包裹在一列中以获得统一的效果。例如，要获得更宽的左右边距：

So the CSS will be,

所以 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>

Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with Internet Explorer, because that's all we're allowed to use at work.

是的，这很麻烦。是的，它适用于 Internet Explorer。事实上，我只用 Internet Explorer 对此进行了测试，因为我们只允许在工作中使用它。

回答by Dan

Just use border-collapse: collapsefor your table, and paddingfor thor td.

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