使用rowspan colspan的html表

Question

我正在尝试创建一个看起来如下的表。

table, td {
  border-collapse: collapse;
  border: 2px solid blue;
}

<table>
  <tr>
    <td rowspan='6' colspan='6'>&nbsp;</td>
    <td rowspan='4'>&nbsp;</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

在我的代码中，空行是否导致它错误打印表格？ 你能说出为什么浏览器会错误地渲染它吗？还是逻辑缺陷？

Answer 1

您需要更新单元尺寸的css。

这是你能做的。

table,
td {
  border-collapse: collapse;
  border: 2px solid blue;
  text-align: center;
}
table {
  width: 100%;
  height: 350px;
}
td {
  width: 50px;
  height: 50px;
}

<table>
  <tr>
    <td rowspan='6' colspan='6'>6X6</td>
    <td rowspan='4'>4X1</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>1
    </td>
  </tr>
  <tr>
    <td>2
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

在这种情况下，我建议您使用div浮动布局而不是table布局。添加11个具有float:left样式的div块将更容易解决