html - 如何在 html bootstrap 中将 Table 列分成多列

Question

我想制作一个 HTML 表格，它分为多列，就像 ms 字一样。谁能指导我如何实现我的目标？

标签： htmlcss

Answer 1

这是您想要的代码，如图像或 ms 字所示。

使用“rowspan”和“colspan”合并单元格

table {
  border: 1px solid #ddd;
  border-collapse: collapse
}

thead {
  background: #f2f2f2;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
}

<table>
  <thead>
    <tr>
      <th rowspan="2">CH</th>
      <th rowspan="2">Max Marks</th>
      <th colspan="3">Marks Obtained</th>
      <th rowspan="2">Grade</th>
      <th rowspan="2">GP</th>
    </tr>
    <tr>
      <th>TH.</th>
      <th>PR.</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>