CSS水平表格单元格间距：如何？答案

【问题标题】：CSS horizontal table cell spacing: how?CSS水平表格单元格间距：如何？
【发布时间】：2010-10-13 23:04:24
【问题描述】：

希望这是一个简单的方法，但我还没有找到解决方案。我想在表格的列之间放置空格。

例子

| Cell |<- space ->| Cell |<- space ->| Cell |

重要的一点是我不希望边缘有空间。有一个边框间距属性，但 IE（6 或 7）不支持它，所以这不好。它还在边缘留出了空间。

我想出的最好的方法是将 padded-right: 10px 放在我的表格单元格上，并在最后一个单元格中添加一个类以删除填充。这不太理想，因为额外的空间是单元格的一部分，而不是在它之外。我猜你可以用透明边框做同样的事情吗？

我也尝试过使用 jQuery：

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

但即使在只有约 100 行大小的表上，在某些情况下也需要 200-400 毫秒，这太慢了。

任何帮助表示赞赏。

谢谢

对于那些建议它们不起作用的列。试试这个：

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

【问题讨论】：

您的“列”示例非常适合我！
什么浏览器？在 Firefox 上，Firebug 显示比表格大的列，但表格单元格实际上并未调整大小（即根据 Firebug 的列超出表格）。
Chrome 不工作。 IE 确实如此。奇怪
How to set cellspacing in tables only horizontally 的可能重复项

标签： javascript jquery html css layout

【解决方案1】：

给每个表格单元格一个透明边框怎么样？我很确定这会为您解决问题...

table td {
  border:solid 5x transparent;
}

你只能像这样水平地应用它......

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

这是我认为您正在努力完成的工作的完整演示......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

我不相信 IE6 支持 CSS :first-child，所以这里有一个解决方法...

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->

【讨论】：

:first-child 没有得到广泛支持的 CSS
我意识到这一点。一切都是为了根据需求选择最佳解决方案。
iirc，IE6 不支持透明边框...所以，它会呈现为黑色。

【解决方案2】：

这可能就是你想要的：

您可以使用两个值：第一个是水平单元格间距，第二个是垂直单元格间距。

<table style="border-spacing: 40px 10px;">

【讨论】：

太棒了！两个限制：第一个和最后一个间距的边距和 Quirksmode 暗示可能不适用于 IE7 及以下quirksmode.org/css/tables.html
如果在这种样式之后 - 第一个和/或最后一个列间距是一个问题 - 您可以将表格放在容器 div 中，左和/或右为负 margins。
这在 Chrome 上似乎有点问题。在 Firefox 上看起来很棒。

【解决方案3】：

尝试使用cols

例子

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cols 也支持类 :)

希望对你有帮助

达科

编辑：澄清col 是在表格顶部声明的一个元素，用于影响整个列。第一个 col 元素将影响第一列，第二个 col = 第二列，依此类推。如果您希望将相同的样式分配给多个列，可以将它们分组到 colgroups 中。

EDIT2：经过更多研究，您可以在col 元素上设置的唯一可靠样式是：

边框
背景
宽度
可见性

没有边距或填充。混蛋！设置列的宽度会显式解决您的问题吗？

【讨论】：

【解决方案4】：

您还可以考虑使用一系列固定宽度的 div，它们向左浮动并带有边距。这可能会让您对元素样式有更多的控制。

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>

【讨论】：

Err.. 我们现在提倡使用 div，即使是表格数据？
否，但 OP 似乎难以使用 table 元素实现他们想要的样式。表格当然最适合表格数据。

【解决方案5】：

如果您像我一样在单元格周围已经有边框，则 Josh 的答案不起作用。

我通过使用“位置：相对；左：-10px”将整个表格稍微向左移动来解决了这个问题。我将它与桌子上的单元格间距结合在一起。

<div id='sandbox'>
    <table cellspacing='10'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

和css：

#sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
}
#sandbox table {
    float: left;
    width: 100%;
}
#sandbox td {
    width: 300px;
    vertical-align: top;
}

这对我有用，我希望它也可以帮助你。

【讨论】：

【解决方案6】：

您是否尝试过使用 col 分组？

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案7】：

这对我有用

border-collapse: separate; border-spacing: 0px 3px;

【讨论】：

【解决方案8】：

添加一个空单元格作为分隔符怎么样？您可以使用上述 col-tag 为空单元格指定宽度

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

或者，如果您想对它们做更多事情，只需向它们添加类，而不是使用内联样式...

【讨论】：

为样式目的使用更多标记？哇。这是一个可怕的想法。
通读以上所有答案后，peirix 的建议是唯一有效的，并且适用于所有浏览器。是的，使用标记进行样式通常是一个坏主意，但在我的特殊情况下，这是唯一有效的方法。边界间距的想法很接近，但它最终在 label:value （前两个 TD 单元格）之间放置了空间，这看起来很糟糕。

【解决方案9】：

乔希的回答非常好，但在我看来是不必要的复杂。当您将表格边框设置为“隐藏”并将折叠模式设置为“折叠”时，将根据需要消除列外边缘的边框。

工作示例：

样式表：

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML：

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>

【讨论】：