HTML 表格，colspan 问题

Question

我正在尝试创建一个这样的表

这是我运行 HTML 代码时得到的结果

即使在设置了 colspan 之后，所有列的列宽也不相同。可能“colspan”属性没有按照我的预期工作。我做错了什么？

我的代码:

<table border="5" width="400" height = "400" table-layout = "auto">
  <tr>
    <td colspan="4" align="center" style="width: 100%;">Colspan = “4”</td>
  </tr>
  <tr>
    <td rowspan="3" colspan="1" style="width: 25%;"> col1 </td>
    <td rowspan="3" colspan="1" style="width: 25%;"> col2 </td>
    <td rowspan="3" colspan="1" style="width: 25%;"> col3 </td>
    <td rowspan="3" colspan="1" style="width: 25%;"> col4 </td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td colspan="2" style="width: 50%;"> colspan = 2 </td>
    <td colspan="2" style="width: 50%;"> colspan = 2 </td>
  </tr>
  <tr>
    <td colspan="3" style="width: 75%;"> colspan = 3</td>
    <td style="width: 25%;"> colspan = 1 </td>
  </tr>
</table>

Answer 1

td{
  min-width:100px;
  text-align: center;
}

<table border="5" width="400" height="400" table-layout="auto">
  <tr>
    <td colspan="4" align="center">Colspan = “4”</td>
  </tr>

  <tr>
    <td rowspan="3" colspan="1"> col1 </td>
    <td rowspan="3" colspan="1"> col2 </td>
    <td rowspan="3" colspan="1"> col3 </td>
    <td rowspan="3" colspan="1"> col4 </td>

  </tr>

  <tr></tr>
  <tr></tr>
  <tr>
    <td colspan="2"> colspan = 2 </td>
    <td colspan="2"> colspan = 2 </td>
  </tr>

  <tr>
    <td colspan="3"> colspan = 3</td>
    <td> colspan = 1 </td>
  </tr>
</table>

您应该设置表格的min-width。

解释

在解释之前，我的英语不好，所以如果你看不懂我的解释，请回复。

您想使每个表的 td 具有相同的 width。

并且您的表格宽度是400，列是4。

因此，每个列的宽度设置为100px。

结果你应该设置 min-width: 100px