paw*_*123 2 html css html-table css-tables
我在 HTML 中创建了一个表格，其中我使用 rowspan 根据它们所属的“类别”对不同的“过程”进行分类。我现在试图通过在 CSS 中使用 border-bottom 来设置表格的样式，以便拆分每个“类别”部分。
这是我想得到的：
但这是我目前得到的：
1. 为什么tbody tr的下边框根本不显示？
2. 如何在每个“程序”部分结束后才显示底部边框？
这是我目前拥有的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price List</title>
<link rel="stylesheet" href="css/table.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
</head>
<body>
<table>
<caption>Price List</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Procedure</th>
<th scope="col">Price (PLN)</th>
<th scope="col">Price (€)</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">These prices are valid until 31.12.2016.</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">Diagnostics</th>
<th scope="row">Dental Consultation</th>
<td>100</td>
<td>25</td>
</tr>
<tr>
<th scope="row">Dental Checkup</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th rowspan="2">Cosmetic Dentistry</th>
<th scope="row">Teeth Cleaning</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Teeth Whitening</th>
<td>800</td>
<td>200</td>
</tr>
<tr>
<th rowspan="3">Conservative Dentistry</th>
<th scope="row">Tooth Filling</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Root Canal</th>
<td>1000</td>
<td>250</td>
</tr>
<tr>
<th scope="row">Tooth Extraction</th>
<td>500</td>
<td>125</td>
</tr>
<tr>
<th rowspan="3">Prosthodontics</th>
<th scope="row">Dental Crown</th>
<td>1400</td>
<td>350</td>
</tr>
<tr>
<th scope="row">Denture</th>
<td>2000</td>
<td>500</td>
</tr>
<tr>
<th scope="row">Dental Bridge</th>
<td>2400</td>
<td>600</td>
</tr>
</tbody>
</table>
</body>
</html>
这是我目前拥有的 CSS：
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
color: grey;
}
table {
max-width: 960px;
margin: 10px auto;
text-align: left;
}
caption {
font-weight: 700;
font-size: 2em;
padding: 20px 0;
}
thead th {
background: #0073e6;
color: #fff;
}
tbody tr {
background: #f2f2f2;
border-bottom: 1px solid #0073e6; /*despite this, no border is displayed*/
}
tbody td:nth-last-of-type(1),
tbody td:nth-last-of-type(2) {
text-align: center;
}
tfoot td {
font-style: italic;
font-size: 0.75em;
text-align: left;
background: white;
}
为了显示行边框，border-collapse: collapse在表格上设置。
我们可以通过选择来设置正确的边框：
tfoot 元素
tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
border-top: 1px solid #0073e6;
}
并设置一个顶部边框。我们可以用一般的兄弟选择器 ( ~)来做到这一点。
tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
border-top: 1px solid #0073e6;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
color: grey;
}
table {
max-width: 960px;
margin: 10px auto;
text-align: left;
border-collapse: collapse;
}
caption {
font-weight: 700;
font-size: 2em;
padding: 20px 0;
}
thead th {
background: #0073e6;
color: #fff;
}
tbody tr {
background: #f2f2f2;
}
tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
border-top: 1px solid #0073e6;
}
tbody td:nth-last-of-type(1),
tbody td:nth-last-of-type(2) {
text-align: center;
}
tfoot td {
font-style: italic;
font-size: 0.75em;
text-align: left;
background: white;
}