表中两行之间的空格？-Java 学习之路

689

这可能通过CSS吗？

我尝试着

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

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

24 回答

167
在父表中，尝试设置
```
border-collapse:separate; 
border-spacing:5em;
```
加上边界声明，看看这是否达到了你想要的效果 . 但请注意，IE不支持“分离边界”模型 .
回复于 2024-05-02T06:40:56+08:00
3
您可以尝试添加分隔符行：

HTML：
```
<tr class="separator" />
```
CSS：
```
table tr.separator { height: 10px; }
```
回复于 2024-05-02T06:40:56+08:00
19
因为我在 table 后面有一个背景图像，用白色填充伪装它是行不通的 . 我选择在每行内容之间放一个空行：
```
<tr class="spacer"><td></td></tr>
```
然后使用css为间隔行提供一定的高度和透明背景 .
回复于 2024-05-02T06:40:56+08:00

-1

你有任何数据的id专辑表...我省略了trs和tds

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

在CSS中：

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

回复于 2024-05-02T06:40:56+08:00

9
好的，你可以做到
```
tr.classname td {background-color:red; border-bottom: 5em solid white}
```
确保在td而不是行上设置背景颜色 . 这适用于大多数浏览器...（Chrome，即＆ff测试）
回复于 2024-05-02T06:40:56+08:00
11
为表提供间距的正确方法是使用cellpadding和cellspacing，例如
```
<table cellpadding="4">
```
回复于 2024-05-02T06:40:56+08:00
11
你需要在 table 上设置 border-collapse: separate; ;大多数浏览器默认样式表从 border-collapse: collapse; 开始，它会划分边框间距 .

另外，border-spacing：在 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>
```
回复于 2024-05-02T06:40:56+08:00

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

回复于 2024-05-02T06:40:56+08:00

-15
要创建行间距的错觉，请将背景颜色应用于行，然后创建一个白色的粗边框，以便创建“空格”:)
```
tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}
```
回复于 2024-05-02T06:40:56+08:00
61

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

另外，如果你反对修改服务器代码以将<div />放在<td />中，你可以使用jQuery（或类似的东西）动态地将<td />内容包装在<div />中>，使您可以根据需要应用CSS .

回复于 2024-05-02T06:40:56+08:00
485
我意识到这是一个旧线程的答案，可能不是所要求的解决方案，但是虽然所有建议的解决方案都没有按照我的要求行事，但这个解决方案对我有用 .

我有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;}
```
希望这有助于某人 .
回复于 2024-05-02T06:40:56+08:00

看一下border-collapse: separate属性（默认）和border-spacing属性 .

首先，您必须使用 border-collapse seperate ，然后您可以使用 border-spacing 定义 space between columns and rows .

这两个CSS属性实际上在每个浏览器上都得到了很好的支持，see here .

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>

回复于 2024-05-02T06:40:56+08:00

337
只需将div放在td中并设置以下div格式：
```
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
```
回复于 2024-05-02T06:40:56+08:00

123

你有没有尝试过：

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

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

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

要么

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

回复于 2024-05-02T06:40:56+08:00

0

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

回复于 2024-05-02T06:40:56+08:00
19
这很顺利：
```
#myOwnTable td { padding: 6px 0 6px 0;}
```
我想你可以通过指定哪个td（如果需要）来制定更精细的布局 .
回复于 2024-05-02T06:40:56+08:00
2
我在遇到类似问题的同时偶然发现了这一点 . 我发现Varun Natraaj的答案非常有帮助，但我会使用透明边框代替 .
```
td { border: 1em solid transparent; }
```
透明边框仍然有宽度 .
回复于 2024-05-02T06:40:56+08:00
9
适用于2015年最新的浏览器 . 简单的解决方案 . 它不适用于透明，但与Thoronwen的答案不同，我不能透明地渲染任何大小 .
```
tr {
      border-bottom:5em solid white;
    }
```
回复于 2024-05-02T06:40:56+08:00
0
来不及答案:)

如果将float应用于 tr 元素，则可以使用 margin 属性在两行之间留出空格 .
```
table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}
```
回复于 2024-05-02T06:40:56+08:00
6
您需要在 td 元素上使用填充 . 这样的事情应该可以解决问题 . 当然，您可以使用顶部填充而不是底部填充来获得相同的结果 .

在下面的CSS代码中，大于号表示填充仅应用于 td 元素，这些元素是具有类 spaceUnder 的 tr 元素的直接子元素 . 这样就可以使用嵌套表 . （示例代码中的单元格C和D . ）我在任何现代浏览器中都打破了代码 .
```
/* 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>
```
这应该有点像这样：
```
+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+
```
回复于 2024-05-02T06:40:56+08:00
-5

或者只是在要添加的行之间添加一个空白，边距的高度间距

回复于 2024-05-02T06:40:56+08:00
10
这样做如上所示......
```
table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; }
```
删除垂直列对齐因此请小心使用它
回复于 2024-05-02T06:40:56+08:00

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

UPDATE

我现在明白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>

回复于 2024-05-02T06:40:56+08:00

47
您可以在表格中使用 line-height ：
```
<table style="width: 400px; line-height:50px;">
```
回复于 2024-05-02T06:40:56+08:00

表中两行之间的空格？

24 回答

相关问题