这可能通过CSS吗？
我尝试着
tr.classname {
border-spacing: 5em;
}
无济于事.也许我做错了什么？
Jan*_*ard 515
您需要在td元素上使用填充.这样的事情应该可以解决问题.当然,您可以使用顶部填充而不是底部填充来获得相同的结果.
在下面的CSS代码中,大于号表示填充仅应用于td直接子tr元素到元素的元素spaceUnder.这样就可以使用嵌套表.(示例代码中的单元格C和D.)我不太确定直接子选择器的浏览器支持(想想IE 6),但它不应该破坏任何现代浏览器中的代码.
/* 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 |
+---+---+
use*_*731 366
在父表中,尝试设置
border-collapse:separate;
border-spacing:5em;
加上边界声明,看看这是否达到了你想要的效果.但要注意,IE不支持"分离边界"模型.
Pra*_*rya 180
你有任何数据的id专辑表...我省略了trs和tds
<table id="albums" cellspacing="0">
</table>
在CSS中:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
小智 128
因为我在桌子后面有一个背景图像,用白色填充伪装它是行不通的.我选择在每行内容之间放一个空行:
<tr class="spacer"><td></td></tr>
然后使用css为间隔行提供一定的高度和透明背景.
Jus*_*ijn 71
边框间距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>Den*_*nis 53
您可以尝试添加分隔符行:
HTML:
<tr class="separator" />
CSS:
table tr.separator { height: 10px; }
Pau*_*aul 20
好的,你可以做到
tr.classname td {background-color:red; border-bottom: 5em solid white}
确保在td而不是行上设置背景颜色.这适用于大多数浏览器...(Chrome,即&ff测试)
Joh*_*and 20
你需要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>
Syn*_*yno 19
看看border-collapse:separate属性(默认)和border-spacing属性.
首先,您必须使用border-collapse 分隔它们,然后您可以使用border-spacing定义列和行之间的空间.
这两个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>ala*_*a27 18
您可以在表格中使用line-height:
<table style="width: 400px; line-height:50px;">
Ogu*_*zel 11
来不及答案:)
如果将float应用于tr元素,则可以在具有margin属性的两行之间留出空格.
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
Var*_*aaj 11
要创建行间距的错觉,请将背景颜色应用于行,然后创建一个白色的粗边框,以便创建"空格":)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
为表提供间距的正确方法是使用cellpadding和cellspacing例如
<table cellpadding="4">
在遇到类似问题的同时,我偶然发现了这一点.我发现Varun Natraaj的答案非常有帮助,但我会使用透明边框代替.
td { border: 1em solid transparent; }
透明边框仍然有宽度.
适用于2015年最新的浏览器.简单的解决方案.它不适用于透明,但与Thoronwen的答案不同,我不能透明地渲染任何大小.
tr {
border-bottom:5em solid white;
}
小智 6
table { border-collapse: separate; border-spacing: 0 1em; }
小智 5
只需放入div并td设置以下样式div：
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
最好的方法是添加<td>一个height属性：
<td height="50" colspan="2"></td>
您可以colspan 在此处阅读更多相关信息。
在下面的示例中，我们的表是绿色的，我们的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>你可以在你的桌子上做类似的事情：
table {
border-collapse: separate;
border-spacing: 0 15px;
}
表选择性：因为它将选择所有表，所以如果您想选择单个表，您也可以这样做
<table class="res">
</table>
对于上面的 html，你可以这样做，请注意，对于特定的表，如果你想要的话，你可以使用下面的方法。
.res {
border-collapse: separate;
border-spacing: 0 15px;
}
参考：https://www.w3docs.com/snippets/css/how-to-create-space- Between -rows-in-the-table.html