如何防止HTML表格单元格出现边距不断扩张的问题

核心问题原因 #

• HTML属性拼写错误：第二行第二个<td>的colspan被误写为colspawn，浏览器无法识别该属性，导致列宽计算逻辑异常，是边距持续扩张的直接原因
• 样式配置缺失：使用table-layout: fixed固定布局时未给table设置明确宽度，固定布局规则不生效
• 额外功能类拼写错误：存在onlcick（应为onclick）、locaiton（应为location）的拼写错误，会导致按钮跳转功能失效

修复后的代码 #

CSS代码 #

html {
  text-align: center;
}

body {
  background-color: antiquewhite;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
}

table {
  margin-right: auto;
  margin-left: auto;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 10px;
}

HTML代码 #

<table>
  <tr>
    <td colspan="6">
      <h1>Voici la liste de modules</h1>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <button class="bouton_module" onclick="window.location.href='m01/module1.html';">Module 1</button>
    </td>
    <td colspan="2">
      <button class="bouton_module" onclick="window.location.href='m02/module2.html';">Module 2</button>
    </td>
    <td colspan="2">
      <button class="bouton_module" onclick="window.location.href='m03/module3.html';">Module 3</button>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <button class="bouton_module" onclick="window.location.href='m04/module4.html';">Module 4</button>
    </td>
    <td colspan="2">
      <button class="bouton_module">Module 5</button>
    </td>
    <td colspan="2">
      <button class="bouton_module">Module 6</button>
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者LimeeFox