Question

这可以通过CSS实现吗？

我正在尝试

tr.classname {
  border-spacing: 5em;
}

无济于事。也许我做错了什么？

Answer 1

您需要在td元素上使用填充。这样的事情应该可以解决问题。当然，您可以使用顶部填充而不是底部填充来获得相同的结果。

在下面的CSS代码中，大于号表示填充仅应用于td元素，这些元素是具有类tr的{{1}}元素的直接子元素。这样就可以使用嵌套表。（示例代码中的单元格C和D。）我不太确定浏览器对直接子选择器的支持（想想IE 6），但它不应该破坏任何现代浏览器中的代码。

spaceUnder

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

这应该有点像这样：

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Answer 2

在父表中，尝试设置

border-collapse:separate; 
border-spacing:5em;

加上边框声明，看看这是否达到了预期的效果。但要注意，IE不支持“分离边界”模型。

Answer 3

你的桌子上有任意数据的id专辑......我省略了trs和tds

<table id="albums" cellspacing="0">       
</table>

在css中：

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Answer 4

因为我在桌子后面有一张背景图片，所以用白色填充物伪装它是行不通的。我选择在每行内容之间添加一个空行：

<tr class="spacer"><td></td></tr>

然后使用css为间隔行提供一定的高度和透明背景。

Answer 5

From Mozilla Developer Network：

border-spacing CSS属性指定相邻单元格边框之间的距离（仅适用于分隔的边框模型）。这相当于表示HTML中的cellspacing属性，但可选的第二个值可用于设置不同的水平和垂直间距。

最后一部分经常受到监督。示例：

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

<强>更新

我现在明白OP需要特定的，单独的行来增加间距。我添加了一个带有tbody元素的设置，可以在不破坏语义的情况下完成。但是，我不确定它是否在所有浏览器上都受支持。我是在Chrome中制作的。

以下示例用于说明如何使表格看起来像单独的行，完整的css甜蜜。还使用tbody设置为第一行添加了更多间距。随意使用！

支持通知：IE8 +，Chrome，Firefox，Safari，Opera 4 +

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Answer 6

您可以尝试添加分隔符行：

HTML：

<tr class="separator" />

的CSS：

table tr.separator { height: 10px; }

Answer 7

您无法更改表格单元格的边距。但是你可以改变填充。更改TD的填充，这将使单元格更大，并使用增加的填充将文本推离侧面。但是，如果你有边框线，它仍然不是你想要的。

Answer 8

您需要在桌面上设置border-collapse: separate;;大多数浏览器默认样式表都从border-collapse: collapse;开始，它会划分边框间距。

此外，边框间距：TD，而不是TR。

尝试：

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Answer 9

好的，你可以做到

tr.classname td {background-color:red; border-bottom: 5em solid white}

确保在td而不是行上设置背景颜色。这应该适用于大多数浏览器......（Chrome，即＆amp; ff测试）

Answer 10

您可以在表格中使用 line-height ：

<table style="width: 400px; line-height:50px;">

Answer 11

查看border-collapse: separate属性（默认）和border-spacing属性。

首先，您必须分隔 border-collapse ，然后您可以使用定义列和行之间的空间边界。

每个浏览器see here实际上都支持这两种CSS属性。

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Answer 12

tr { 
    display: block;
    margin-bottom: 5px;
}

Answer 13

太晚的回答：）

如果将float应用于tr元素，则可以在具有margin属性的两行之间留出空格。

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Answer 14

要创建行间距的错觉，请将背景颜色应用于行，然后创建一个白色的粗边框，以便创建“空格”：）

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Answer 15

为表格提供间距的正确方法是使用cellpadding和cellspacing，例如

<table cellpadding="4">

Answer 16

我在遇到类似问题时偶然发现了这一点。我发现Varun Natraaj的答案非常有用，但我会使用透明边框。

td { border: 1em solid transparent; }

透明边框仍有宽度。

Answer 17

适用于2015年的大多数最新浏览器。简单的解决方案。它并不适用于透明，但与Thoronwen的答案不同，我无法通过任何尺寸进行渲染。

    tr {
      border-bottom:5em solid white;
    }

Answer 18

只需将div放在td中并设置以下div格式：

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Answer 19

最好的方法是添加带有 <td> 属性的 height：

<td height="50" colspan="2"></td>

您可以阅读有关 colspan here 的更多信息。

在下面的例子中，我们的表格是绿色，我们的td和height属性是黄色 :

<table style="background-color: green">
    <tr>
        <td>
            <span>Lorem</span>
        </td>
        <td>
            <span>Ipsum</span>
        </td>
    </tr>
    <tr>
        <td height="50" colspan="2" style="background-color: yellow"></td>
    </tr>
    <tr>
        <td>
            <span>Sit</span>
        </td>
        <td>
            <span>Amet</span>
        </td>
    </tr>
</table>

Answer 20

我意识到这是旧线程的答案，可能不是所要求的解决方案，但是虽然所有建议的解决方案都没有按照我的要求行事，但这个解决方案对我有用。

我有2个表格单元格，一个是背景颜色，另一个是边框颜色。上述解决方案去除了边界，因此右侧的单元格似乎漂浮在半空中。实现这一诀窍的解决方案是用div和相应的类替换table，tr和td：table将是div id="table_replacer"，tr将是div class="tr_replacer"和td将是div class="td_replacer"（显然也会将结束标记更改为div）

为了解决我的问题，css是：

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这有助于某人。

Answer 21

或者只是在要添加间距

的行之间添加边距高度的空白

Answer 22

您可以填写＆lt; td /＆gt; ＆lt; div /＆gt;元素元素，并将任何边距应用于您喜欢的div。对于行之间的可视空间，您可以在＆lt; tr /＆gt;上使用重复的背景图像。元件。（这是我今天刚刚使用的解决方案，它似乎适用于IE6和FireFox 3，但我没有进一步测试。）

此外，如果您不愿意修改服务器代码以将＆lt; div /＆gt; s放在＆lt; td /＆gt;内，您可以使用jQuery（或类似的东西）动态包装＆lt; td /＆GT; ＆lt; div /＆gt;中的内容，使您可以根据需要应用CSS。

Answer 23

这是一个简单而优雅的解决方案，但有一些警告：

您实际上无法使间隙透明，需要给它们指定特定的颜色。
您不能在间隙上方和下方的边界的圆角处
您需要了解表格单元格的填充和边框

考虑到这一点，请尝试以下操作：

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

您实际上正在做的是将矩形::before块粘贴到要在该行中所有单元格的顶部加上一个空格的顶部。这些块从单元格中伸出一点以重叠现有边界，将其隐藏。这些块只是夹在中间的顶部和底部边框：顶部边框形成了间隙，底部边框重新创建了单元格原始顶部边框的外观。

请注意，如果表格本身以及单元格周围都有边框，则需要进一步增加“块”的水平-ve边距。因此，对于4px的表格边框，您可以使用：

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

如果您的表格使用border-collapse:separate而不是border-collapse:collapse，则您需要（a）使用完整的表格边框宽度：

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

...以及（b）替换现在需要在间隙下方显示的边框的双倍宽度：

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

如果愿意的话，该技术很容易适应.gapafter版本，也可以轻松创建垂直（列）间隙而不是行间隙。

在这里是一个Codepen，您可以在其中查看它的运行情况：https://codepen.io/anon/pen/agqPpW

Answer 24

这里运作顺利：

#myOwnTable td { padding: 6px 0 6px 0;}

我想你可以通过指定哪个td来确定更精细的布局。

Answer 25

如上所示...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; }

删除垂直列对齐，因此请小心使用它

Answer 26

你试过了吗？

tr.classname { margin-bottom:5em; }

或者，每个td也可以调整：

td.classname { margin-bottom:5em; }

或

 td.classname { padding-bottom:5em; }

表中两行之间的空格？

26 个答案: