这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
当前回答
您可以在表格中使用线条高度:
<table style="width: 400px; line-height:50px;">
其他回答
tr {
display: block;
margin-bottom: 5px;
}
好的,你可以
tr.classname td {background-color:red; border-bottom: 5em solid white}
确保背景色设置在td而不是行上。这应该适用于大多数浏览器。。。(铬,即已测试)
表{边框折叠:单独;边框间距:0 1em;}
您可以在表格中使用线条高度:
<table style="width: 400px; line-height:50px;">
行间隙的出现可以通过在应该存在下一个间隙的单元格上使用底部边框来实现,即边框底部:纯白色5px;
下面是创建屏幕截图的代码:
<style>
table.class1 {
text-align:center;
border-spacing:0 0px;
font-family:Calibri, sans-serif;
}
table.class1 tr:first-child {
background-color:#F8F8F8; /* header row color */
}
table.class1 tr > td {
/* firefox has a problem rounding the bottom corners if the entire row is colored */
/* hence the color is applied to each cell */
background-color:#BDE5F8;
}
table.class1 th {
border:solid #A6A6A6 1px;
border-bottom-width:0px; /* otherwise borders are doubled-up */
border-right-width:0px;
padding:5px;
}
table.class1 th:first-child {
border-radius: 5px 0 0 0;
}
table.class1 th.last {
border-right-width:1px;
border-radius: 0 5px 0 0;
}
/* round the bottom corners */
table.class1 tr:last-child > td:first-child {
border-radius: 0 0 0 5px;
}
table.class1 tr:last-child > td:last-child {
border-radius: 0 0 5px 0;
}
/* put a line at the start of each new group */
td.newgroup {
border-top:solid #AAA 1px;
}
/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup {
border-bottom:solid white 5px;
}
</style>
<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>