html - Rowspan 单元格大小不一样

Question

我有一个简单的 table 和 rowspan 。我需要那个单元格 1、单元格 2 和单元格 6 的大小相同。 请问我怎样才能做到这一点

<table>
  <tr>
    <td>number1</td>
    <td>number3</td>
  </tr>
  <tr>
    <td rowspan="2">number2</td>
    <td>number4</td>
  </tr>
  <tr>
    <td>number5</td>
  </tr>
  <tr>
    <td>number6</td>
    <td>number7</td>
  </tr>
</table>

Answer 1

你是说像这样？

此解决方案使用现有标记，不需要任何“空”行。

table {
  border-collapse: collapse;
}
td {
  border: 1px solid #ddd;
  padding: 10px;
}
tr:nth-child(1) td:first-child,
tr:nth-child(2) td:first-child,
tr:nth-child(4) td:first-child {
  height: 60px;
}

<table>
  <tr>
    <td>number1</td>
    <td>number3</td>
  </tr>
  <tr>
    <td rowspan="2">number2</td>
    <td>number4</td>
  </tr>
  <tr>
    <td>number5</td>
  </tr>
  <tr>
    <td>number6</td>
    <td>number7</td>
  </tr>
</table>