Question

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

实施例

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

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

Answer 2

你可能正在寻找什么：

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

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

Answer 3

尝试使用col s

例如

<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 =第二列，依此类推。如果您希望将相同的样式分配给多个列，则可以将它们分组到colgroup中。

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

边界
背景
宽度
能见度

没有边距或填充。开溜！设置列的宽度会明确解决您的问题吗？

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

Answer 5

如果你的细胞周围已经有边框，就像我一样，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;
}

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

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

Answer 7

这对我有用

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

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

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

Answer 9

Josh的答案相当不错，但在我看来，这一点毫无疑问是复杂的。将表格边框设置为“隐藏”并将折叠模式设置为“折叠”时，将根据需要消除列外边缘上的边框。

工作示例：

样式表：

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>

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

9 个答案: