Question

这是我尝试过的：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th>Airlines</th>
    <th>Departure</th>
    <th>Destination</th>
    <th colspan="2">Time</th>
    <th>Fare</th>
    
  <tr>
    <td>Buddha Air</td>
    <td>Kathmandu</td>
    <td>Pokhara</td>
    <td>7:55</td>
    <td>8:20</td>
  </tr>

  <tr>
    <td>Yeti Airlines</td>
    <td>Pokhara</td>
    <td>Jomsom</td>
  </tr>

  <tr>
    <td>Shree Airlines</td>
    <td>Kathmandu</td>
    <td>Dhangadhi</td>
  </tr>

  <tr>
    <td>Surya Air</td>
    <td>Biratnagar</td>
    <td>Kathmandu</td>
  </tr>
</table>

这就是我想要的：

这就是我现在拥有的：

如何以这种方式划分列标题？

Answer 1

您快到了！您只需要为副标题添加另一行（出发和到达），然后使所有其他标题跨越这两行。

我还使用<thead>和<tbody>将标题行和正文行分组在一起，以提高可读性和标准合规性。

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width: 100%;">
  <thead>
    <tr>
      <th rowspan="2">Airlines</th>
      <th rowspan="2">Departure</th>
      <th rowspan="2">Destination</th>
      <th colspan="2">Time</th>
      <th rowspan="2">Fare</th>
    </tr>
    
    <tr>
      <th>Departure</th>
      <th>Arrival</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Buddha Air</td>
      <td>Kathmandu</td>
      <td>Pokhara</td>
      <td>7:55</td>
      <td>8:20</td>
      <td>3500</td>
    </tr>

    <tr>
      <td>Yeti Airlines</td>
      <td>Pokhara</td>
      <td>Jomsom</td>
      <td>8:15</td>
      <td>8:45</td>
      <td>3900</td>
    </tr>

    <tr>
      <td>Shree Airlines</td>
      <td>Kathmandu</td>
      <td>Dhangadhi</td>
      <td>11:15</td>
      <td>12:00</td>
      <td>8000</td>
    </tr>

    <tr>
      <td>Surya Air</td>
      <td>Biratnagar</td>
      <td>Kathmandu</td>
      <td>1:15</td>
      <td>1:55</td>
      <td>4200</td>
    </tr>
  </tbody>
</table>

Answer 2

在下面尝试此代码：

我刚刚为到达和离开添加了一个新的tr，然后使用colspan和rowspan来调整它们td的大小

    <html>

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>

<table style="width:100%">
  <tr>
    <th rowspan="3">Airlines</th>
    <th rowspan="3">Departure</th>
    <th rowspan="3">Destination</th>
    <th colspan="2">Time</th>
    <th rowspan="3">Fare</th>
  <tr>
  <tr>
    
    <td>Departure</td>
    <td>Arrival</td>
    
  </tr>
    <td>Buddha Air</td>
    <td>Kathmandu</td>
    <td>Pokhara</td>
    <td>7:55</td>
    <td>8:20</td>
    <td>3500</td>

  </tr>
  <tr>
    <td>Yeti Airlines</td>
    <td>Pokhara</td>
    <td>Jomsom</td>
    <td>7:55</td>
    <td>8:20</td>
    <td>3500</td>


  </tr>
  <tr>
    <td>Shree Airlines</td>
    <td>Kathmandu</td>
    <td>Dhangadhi</td>
    <td>7:55</td>
    <td>8:20</td>
    <td>3500</td>

  </tr> 
  <tr>
      <td>Surya Air</td>
      <td>Biratnagar</td>
      <td>Kathmandu</td>
      <td>7:55</td>
      <td>8:20</td>
      <td>3500</td>
  </tr>
</table>

</body>
</html>

Answer 3

您应该使用rowspan作为标题，并且应该有两个标题行

https://jsfiddle.net/7eq3ghat/2/

Answer 4

这是我的答案...添加了新的并为时间列设置了colspan = 2，为其他剩余列设置了rowpan = 2值。

<html>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
<table style="width:100%">
  <tr>
    <th rowspan="2">Airlines</th>
    <th rowspan="2">Departure</th>
    <th rowspan="2">Destination</th>
    <th colspan="2">Time</th>
    <th rowspan="2">Fare</th>
  </tr> 
  <tr>
    <td >Departure</td>
    <td>Arrival</td>
  </tr>
  <tr>
    <td>Buddha Air</td>
    <td>Kathmandu</td>
    <td>Pokhara</td>
    <td>7:55</td>
    <td>8:20</td>
    <td>3500</td>
  </tr>
  <tr>
    <td>Yeti Airlines</td>
    <td>Pokhara</td>
    <td>Jomsom</td>
    <td>8:15</td>
    <td>8:45</td>
    <td>3900</td>
  </tr>
  <tr>
    <td>Shree Airlines</td>
    <td>Kathmandu</td>
    <td>Dhangadhi</td>
    <td>11:15</td>
    <td>12:00</td>
    <td>8000</td>
  </tr> 
  <tr>
      <td>Surya Air</td>
      <td>Biratnagar</td>
      <td>Kathmandu</td>
      <td>1:15</td>
      <td>1:55</td>
      <td>4200</td>
  </tr>
</table>

</body>
</html>

以上代码的结果：

划分列标题

4 个答案: