如何垂直拆分 table head 单元格

Question

我需要这样实现

我使用了 colspan，但它只在下面的单元格中实现，而不是头部单元格本身。

这是我的 HTML

<tr class="head-row-courses-info">
    <th>#</th>
    <th>Course Name</th>
    <th>Total Hours</th>
    <!-- th with colspan 2 -->
    <th colspan="2">
        Date
        <!-- add subheading with two cells -->
        <table class="sub-head-row-courses-info">
            <tr>
                <th>Start</th>
                <th>End</th>
            </tr>
        </table>
    </th>
    <th>Institution</th>
    <th>Attachment</th>
    <th>Nots</th>
</tr>

谢谢！

Answer 1

你可以这样做：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

th {
background-color: darkgrey;
}

td {
background-color: #dddddd;
}

<html>
  <head>
    <title>Table</title>
  </head>

  <body>
    <table>
      <tr>
        <th rowspan="2">#</th>
        <th rowspan="2">Course Name</th>
        <th rowspan="2">Total hours</th>
        <th colspan="2">Date</th>
        <th rowspan="2">Institution</th>
        <th rowspan="2">Attachment</th>
        <th rowspan="2">Notes</th>
      </tr>
      <tr>
        <th>From</th>
        <th>To</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Network Management Admin</td>
        <td>50</td>
        <td>25/10/2019</td>
        <td>2/1/2020</td>
        <td>Mohammed Training Center</td>
        <td><a href="#">View</a></td>
        <td>The Course use.....</td>
      </tr>
    </table>
  </body>
</html>

如何垂直拆分 table head 单元格

How to split the table head cell vertically

html

css