这可能通过CSS吗？
我尝试着
tr.classname {
border-spacing: 5em;
}
无济于事.也许我做错了什么？
您需要在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;
}
A
B
C
D
E
F
在父表中,尝试设置
border-collapse:separate; border-spacing:5em;
加上边界声明,看看这是否达到了你想要的效果.但要注意,IE不支持"分离边界"模型.
你有任何数据的id专辑表...我省略了trs和tds
在CSS中:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
因为我在桌子后面有一个背景图像,用白色填充伪装它是行不通的.我选择在每行内容之间放一个空行:
然后使用css为间隔行提供一定的高度和透明背景.
来自Mozilla开发者网络:
边框间距CSS属性指定相邻单元格边框之间的距离(仅适用于分隔的边框模型).这相当于表示HTML中的cellspacing属性,但可选的第二个值可用于设置不同的水平和垂直间距.
最后一部分经常受到监督.例:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is */
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;
}
Lead singer
Band
Bono
U2
Chris Martin
Coldplay
Mick Jagger
Rolling Stones
John Lennon
The Beatles
您可以尝试添加分隔符行:
HTML:
CSS:
table tr.separator { height: 10px; }
您无法更改表格单元格的边距.但是你可以改变填充.更改TD的填充,这将使单元格更大,并使用增加的填充将文本推离侧面.但是,如果你有边框线,它仍然不是你想要的.
好的,你可以做到
tr.classname td {background-color:red; border-bottom: 5em solid white}
确保在td而不是行上设置背景颜色.这适用于大多数浏览器...(Chrome,即&ff测试)
你需要border-collapse: separate;在桌子上设置; 大多数浏览器默认样式表开始于border-collapse: collapse;,它会划分边框间距.
另外,边界间距:继续TD,而不是TR.
尝试:
| A | B |
| C | D |
看看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;}
Some text - 1
Some text - 1
Some text - 2
Some text - 2
Some text - 3
Some text - 3
您可以在表格中使用line-height:
京公网安备 11010802040832号