HTML 单元格在使用多个行跨度时不会组合高度



我有一个基本结构如下的表格。问题是当我对所有列使用相同的行跨度时,高度仅折叠为一行。

<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

当某些列具有行跨度时

<table border=1>
  <tr>
    <td rowspan=2>1</td>
    <td rowspan=2>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

当所有列都有行跨度时。这就是问题出现的地方。基本上预期的结果是第一行跨越两行,而不是只跨越一行

<table border=1>
  <tr>
    <td rowspan=2>1</td>
    <td rowspan=2>2</td>
    <td rowspan=2>3</td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

正如李斯特先生所提到的,您可以通过使用行跨度设置 td 元素的样式来实现这一点。 但与其使用百分比,不如使用 em 作为单位。 td[rowspan='2'] {height:2em;}

这就是计算表行高的方式,除非您明确指定高度

最新更新