我有一个包含2个标题行和多个正文行的表。我希望正文中行之间的间距为10像素。我通过以下方式实现这一目标:
border-collapse: separate;
border-spacing: 10px;
但是,这显然也适用于标题中的行。但是对于标题,我希望行之间没有空格。我的HTML是:
table td {
background-color: lime;
padding: 12px 12px 12px 12px;
}
table th {
background-color: red;
padding: 12px 12px 12px 12px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
<table>
<thead>
<tr>
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
<tr>
<th>head 2</th>
<th>head 2</th>
<th>head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
小提琴是here。我希望第一个标题行的底部和第二个标题行的顶部之间没有空格。我已经尝试将border-spacing
仅应用于正文,但它只适用于表级。有什么想法吗?
答案 0 :(得分:3)
border-spacing
已应用于table elements,无法单独定位tbody
,但您可以尝试以下CSS黑客并将border: white
应用于td
}元素创建边际效应。
附加代码:
table td {
border: 10px solid white;
border-right: 0;
border-left: 0;
}
<强>输出:强>
table td {
background-color: lime;
padding: 12px 12px 12px 12px;
border: 10px solid white;
border-right: 0;
border-left: 0;
}
table th {
background-color: red;
padding: 12px 12px 12px 12px;
}
table {
border-collapse: separate;
}
<table>
<thead>
<tr>
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
<tr>
<th>head 2</th>
<th>head 2</th>
<th>head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
答案 1 :(得分:0)
尝试使用填充/边框间距在CSS中创建一个类
.tableClass>tbody>tr>td {
padding: 12px 12px 12px 12px;
}
这通常对我有用
答案 2 :(得分:0)
我认为这是如何实现的。
table.test td {
background-color: lime;
//margin: 12px 12px 12px 12px;
padding: 12px 12px 12px 12px;
}
table.test th{
background-color: red;
padding: 12px 12px 12px 12px;
}
table.test tbody{
border-collapse: separate;
border-spacing: 10px;
position:absolute;
*border-collapse: expression('separate', cellSpacing = '10px');
}
&#13;
<table class="test">
<thead>
<tr>
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
<tr>
<th>head 2</th>
<th>head 2</th>
<th>head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
&#13;
下面是更新的jsfiddle
<强> Jsfiddle 强>
答案 3 :(得分:0)
作为一个古老的问题,但有多余之处,
您可以使用transform
,box-shadow
或position
在两行(或更多行)之间折叠伪造:
table td {
background-color: lime;
padding: 12px 12px 12px 12px;
}
table th {
background-color: red;
padding: 12px 12px 12px 12px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
thead tr:first-of-type {
transform: translatey(10px)
}
<table>
<thead>
<tr>
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
<tr>
<th>head 2</th>
<th>head 2</th>
<th>head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
table td {
background-color: lime;
padding: 12px 12px 12px 12px;
}
table th {
background-color: red;
padding: 12px 12px 12px 12px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
thead tr:first-of-type {
position:relative;
top:10px
}
<table>
<thead>
<tr>
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
<tr>
<th>head 2</th>
<th>head 2</th>
<th>head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
table td {
background-color: lime;
padding: 12px 12px 12px 12px;
}
table th {
background-color: red;
padding: 12px 12px 12px 12px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
thead tr:first-of-type th {
box-shadow:0 10px red
}
<table>
<thead>
<tr>
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
<tr>
<th>head 2</th>
<th>head 2</th>
<th>head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
答案 4 :(得分:0)
.table th{
background-color: red;
padding: 12px;
}
.table td {
background-color: green;
padding: 12px;
}
.tablerow {
border-bottom: 20px solid blue;
}
<table class="table">
<thead>
<tr class="tablerow">
<th>head 1</th>
<th>head 1</th>
<th>head 1</th>
</tr>
</thead>
<tbody>
<tr class="tablerow">
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="tablerow">
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
一切正常。它在行的底部放置了一个 20px 的边框,可以用作行之间的间距,您也可以应用全边框。