html - 使用第 nth-of-type() 选择器上的查询格式化表

Question

我创建了一个汽车表，其中包含汽车名称、型号、马力和最大速度作为列。

我想合并汽车名称行（因此所有具有相同名称的汽车使用相同的单元格）并使表格响应如下：

但是关于数据的列名没有正确显示：

下面是 HTML 和 CSS 代码

HTML：

table, th, td {
  border : black solid 1px;
}
table {
  width : 100%;
  border-collapse : collapse;
}
tr:nth-of-type(odd) {
  background : #eee;
}
th {
  background : #333;
  color : white;
  font-weight : bold;
}
td, th {
  padding : 6px;
  border : #ccc solid 1px;
  text-align : left;
}
#car {
  font-weight : bold;
  font-size : 20px;
}
table, thead, tbody, th, td, tr {
  display : block;
}
thead tr {
  position : absolute;
  top : -9999px;
  left : -9999px;
}
tr {
  border : #ccc solid 1px;
}
td {
  border : none;
  border-bottom : 1px solid #eee;
  position : relative;
  padding-left : 50%;
}
td:before {
  position : absolute;
  top : 6px;
  left : 6px;
  width : 45%;
  padding-right : 10px;
  white-space : nowrap;
}
td:nth-of-type(1):before {
  content : "Car Name";
}
td:nth-of-type(2):before {
  content : "Model";
}
td:nth-of-type(3):before {
  content : "Horsepower";
}
td:nth-of-type(4):before {
  content : "Max speed (in Kmph)";
}
td:nth-of-type(5):before {
  content : "Price (in US dollars)";
}

<table>
  <thead>
    <tr>
      <th>Car Name</th>
      <th>Model</th>
      <th>Horsepower</th>
      <th>Max speed (in Kmph)</th>
      <th>Price (in CAD dollars)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3" ID="car">Audi</td>
      <td> A6 Sedan</td>
      <td>180 kW (245 PS)</td>
      <td> 243</td>
      <td>  $54,900</td>
    </tr>
    <tr>
      <td> RS 7 Sports back</td>
      <td> 441 kW (600 PS)</td>
      <td> 250 </td>
      <td> $ 259,570</td>
    </tr>
    <tr>
      <td> A8L</td>
      <td> 250 kW (340 PS)</td>
      <td> 320 </td>
      <td>  $86,500</td>
    </tr> 
  </tbody>
  <!-- blank -->
  <tbody>
    <tr>
      <td rowspan="3" ID="car">BMW </td>
      <td> BMW X3</td>
      <td>280 kW (245 PS)</td>
      <td> 210</td>
      <td>  $55,900</td>
    </tr>
    <tr>
      <td> BMW X5</td>
      <td> 390 kW (440 PS)</td>
      <td> 235 </td>
      <td> $59,400</td>
    </tr>
    <tr>
      <td> BMW X7</td>
      <td> 441 kW (600 PS)</td>
      <td>250</td>
      <td>$75,000</td>
    </tr> 
  </tbody>
  <!-- blank -->
  <tbody>
    <tr>
      <td rowspan="3" ID="car">Mercedes Benz</td>
      <td> A-Class</td>
      <td>200 kW (345 PS)</td>
      <td> 225</td>
      <td>  $30,000</td>
    </tr>
    <tr>
      <td> C-Class</td>
      <td>280 kW (445 PS) </td>
      <td> 290</td>
      <td> $41,600</td>
    </tr>
    <tr>
      <td> E-Class</td>
      <td>380 kW (545 PS)</td>
      <td> 250</td>
      <td> $54,250</td>
    </tr> 
  </tbody>
  <!-- blank -->
  <tbody>
    <tr>
      <td rowspan="3" ID="car" >JAGUAR </td>
      <td>JAGUAR F-PACE</td>
      <td>247kW (245 PS)</td>
      <td> 280</td>
      <td> $49,995</td>
    </tr>
    <tr>
      <td> JAGUAR XE</td>
      <td> 310 kW (420 PS)</td>
      <td> 225 </td>
      <td>$ 41,900 </td>
    </tr>
    <tr>
      <td>JAGUAR XJ</td>
      <td> 380 kW (490 PS)</td>
      <td>250</td>
      <td>$97,500</td>
    </tr> 
  </tbody> 
</table>

标签： htmlcsshtml-table