问题描述
我想知道使用html和/或CSS,是否可以只折叠表格轮廓的tr,而表格轮廓和trs以及tds和ths具有不同的边框样式。
我知道这很复杂,因此,如果可以更清楚地看一下,这是我要实现的目标的一个图形:
解决方法
否,border-collapse
仅适用于整个表,它不是tr
或td
元素的有效属性,因此您不能将其应用于那些获得不同间距的元素。
不过,您可以通过将单元格内容添加到div并将其用于某些样式来“伪造”它:
- 像往常一样将外部表样式应用于
table
- 将行样式应用于
th
/td
单元格的顶部和底部边框 - 将“单元格”样式应用于
th
和td
内的div。
工作示例:
table {
border: 6px solid lightgray;
border-right-color: gray;
border-bottom-color: gray;
border-collapse: collapse;
}
td {
border-top: 5px solid gray;
}
tr:not(:last-child) td{
border-bottom: 5px solid gray;
}
th .cell,td .cell {
margin: 5px;
padding: 5px;
border: 2px ridge lightblue;
}
<table>
<tr>
<th><div class="cell">First Name</div></th>
<th><div class="cell">Last Name</div></th>
</tr>
<tr>
<td><div class="cell">John</div></td>
<td><div class="cell">Smith</div></td>
</tr>
<tr>
<td><div class="cell">Jane</div></td>
<td><div class="cell">Doe</div></td>
</tr>
</table>
,
找到了一种方法,只需在两个tr之间添加一个小时和一个微小的tr。
hr {
border: 4px outset rgb(207,172,179);
width: 443px;
position: absolute;
top: 388px;
left: 35px;
}
tr#mini {
border: none;
padding: 0px;
margin: 0px;margin-top: 0px;
margin-bottom: 0px;
height: 8px;
}
HTML:
<table id="tableau" class="nomaltext">
<tr>
<th>
25g
</th>
<th>
50g
</th>
<th>
75g
</th>
<th>
100g
</th>
<th>
Personnalisé (min. 120g)
</th>
</tr>
<tr id="mini">
<hr>
</tr>
<tr>
<td>
5,99$
</td>
<td>
8,99$
</td>
<td>
13,80$
</td>
<td>
7,40$
</td>
<td>
11¢/gramme
</td>
</tr>
</table>