CSS水平表格单元格间距：如何实现？

Question

CSS水平表格单元格间距：如何实现？

39

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

示例：

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

重要的一点是我不想在边缘留空。有一个border-spacing属性，但是在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>

- Jordie

你的“columns”示例对我来说完美运行！ - Josh Stodola

用哪个浏览器？对于我来说，在Firefox上，Firebug显示的列比表格更大，但实际上表格单元格并没有重新调整大小（即，根据Firebug的列扩展超出了表格）。 - Jordie

Chrome不工作。IE可以。奇怪。 - Jordie

可能是重复的问题：如何仅在表格水平方向上设置单元格间距。 - ivan_pozdeev

9个回答

12

这可能是您正在寻找的内容：

您可以使用两个值：第一个是水平 cellspacing，第二个是垂直 cellspacing。

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

- Lukas

1

太好了！有两个限制：第一个和最后一个空格的边距以及Quirksmode意味着可能无法在IE7及以下版本中工作。http://www.quirksmode.org/css/tables.html - KCD

如果在这种样式下，第一列和/或最后一列的间距成为问题，您可以将表格放在一个带有负左和/或右边距的容器div中。 - Ujjwal Singh

这在Chrome上似乎有点问题。在Firefox上看起来很棒。 - SMBiggs

9

尝试使用“col”进行排版。

示例。

<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也支持类:)

希望这可以帮到你

Darko

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

编辑2： 经过更多的研究，发现在col元素上唯一可靠的样式是：

边框
背景
宽度
可见性

没有外边距或内边距。真糟糕！显式设置列的宽度是否可以解决您的问题？

- Darko Z

2

你也可以考虑使用一系列固定宽度的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>

- Bayard Randel

我们现在倡导即使是表格数据也使用div吗？ - cletus

不是的，但是原帖作者似乎在使用表格元素时遇到了一些样式上的困难。表格确实最适合用于表格数据。 - Bayard Randel

2

如果您的单元格已经有边框，像我一样，那么Josh的答案就不适用了。

我通过将整个表格向左移动一点，使用"position: relative; left: -10px"来解决这个问题。我还将此与表格上的cellspacing相结合使用。

<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;
}

这是对我有效的方法，希望它也能帮助到你。

- Timo

1

你尝试使用列分组了吗？

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

- Joel

1

这对我很有效

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

- Shaho Amini

0

那么加一个空单元格作为间隔怎么样？你可以像上面所述使用col标签来给这些空单元格指定宽度

<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

1

使用更多的标记来进行样式设置？哇，这是一个可怕的想法。 - Josh Stodola

阅读了以上所有答案后，peirix的建议是唯一可行的，并且在所有浏览器中都有效。是的，使用标记来进行样式设置通常不是一个好主意，但在我的特定情况下，这是唯一可行的方法。border-spacing的想法很接近，但最终会将标签：值（前两个TD单元格）之间的空间分开，看起来很糟糕。 - Ryan Stille

-1

Josh的回答很好，但在我看来过于复杂了。当您将表格边框设置为“hidden”并将折叠模式设置为“collapse”时，列外侧的边框将被消除，正如所需的那样。

工作示例：

样式表：

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>

- martin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Stodola · Accepted Answer

给每个表格单元格加上透明边框怎么样？我敢肯定这样做能解决你的问题...

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