html 表行未正确显示

ddhy6vgd  于 2023-04-04  发布在  其他
关注(0)|答案(1)|浏览(149)

为什么第五排没有效果?

<table border="1" cellspacing="0" width="300">
  <tr>
    <td colspan="5">1</td>
  </tr>
  <tr>
    <td colspan="3">2</td>
    <td colspan="2" rowspan="3">3</td>
  </tr>
  <tr>
    <td rowspan="3">4</td>
    <td colspan="2">5</td>
  </tr>
  <tr>
    <td rowspan="2">8</td>
    <td rowspan="2">9</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
  <table>

我希望总行应该是5所附的图像。

vyswwuz2

vyswwuz21#

你只需要更多的内容就可以看到你的rowspan的效果。如果你让所有的单元格(几乎)为空,它们将只占用容纳它们的内容所需的最小空间。td大小是动态的,它们会自动调整,并且总是(也)取决于它们的内容:

table {
  width: 100%;
  table-layout: fixed;
}
<table border="1" cellspacing="0" width="300">
  <tr>
    <td colspan="5">1</td>
  </tr>
  <tr>
    <td colspan="3">2</td>
    <td colspan="2" rowspan="3">3</td>
  </tr>
  <tr>
    <td rowspan="3">4 you need some more content to see the effect of your rowspans</td>
    <td colspan="2">5</td>
  </tr>
  <tr>
    <td rowspan="2">8</td>
    <td rowspan="2">9</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

相关问题