html - 如何使表格在一列中有两行

Question

我想要一张像你在图片中看到的桌子。

但我在这方面真的不成功。这是我的代码：

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

table {
  width: 100%;
  border-collapse: collapse;
}

<table>
  <tr>
    <td>SOL</td>
    <td>K</td>
    <td>Y</td>
    <td>M</td>
  </tr>
  <tr>
    <td>
      <td>b</td>
      <td>a1</td>
    </td>
    <td>b</td>
    <td>b</td>
  </tr>
</table>

你能帮我解决这个问题吗？

标签： htmlcsshtml-table

Answer 1

这是解决方案

table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid lightgray;
  font-family: sans-serif;
  padding: 7px 15px;
}

<table>
  <tbody>
    <tr>
      <th colspan="2">SOL</th>
      <th>K</th>
      <th>Y</th>
      <th>M</th>
    </tr>
    <tr>
      <td></td>
      <td>a1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>a2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>b2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>