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

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

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

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

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

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

TBH。对于所有对 CSS 的狂热，您不妨直接使用它们，因为它们没有被弃用......cellpadding="0"cellspacing="0"

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

基本

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

td { 
    padding: 10px;
}

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

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

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

IE ≤ 7 中的问题

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

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

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

注意：有关可以应用于表格和浏览器的 CSS 属性的概述，请参阅这个精彩的 Quirksmode 页面。

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

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

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

此 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')返回 ，但两个语句都会运行，因为在 JavaScript 中，您可以传递比预期更多的参数，并且所有这些参数都将被计算。'separate'

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

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

违约

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

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-spacingborder-collapseseparate

自己试试吧！

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

用 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 测试过这一点，因为这是我们在工作中可以使用的全部内容。

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

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

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

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

我在边界崩溃后使用过，比如!important

border-collapse: collapse !important;

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

试试这个：

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

或者试试这个：

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

CSS：

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

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

td { 
    padding: 20px;
}

对于边框间距：

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

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

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

我的重置.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 */
}

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

如果没有工作，请尝试设置 to，然后 margin 将起作用。margindisplaytrblock

您可以使用 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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

同样，您可以使用 CSS border-spacing 属性来应用相邻表格单元格边框之间的间距，就像 cellspacing 属性一样。但是，为了工作边框间距，border-collapse 属性 muse 的值是分开的，这是默认的。

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

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

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

• 第一个使用 （） 的默认值，用于提供单元格间距，border-collapseseparateborder-spacing

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

在这两种情况下，单元填充都是通过分配给 s 来实现的，在这两种情况下，分配给它们的只是为了更清晰的演示。padding:10pxtdbackground-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>