如何在table内嵌套fieldset表单，实现colspan=3的列等宽布局效果

实现代码 #

直接调整table为3列结构，配合table-layout: fixed实现三列等宽，提交按钮单元格加colspan="3"跨列即可，代码示例如下：

<fieldset style="width: 400px;">
  <legend><h2>Form Validation</h2></legend>
  <table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
    <form>
      <tr>
        <td style="width: 33%;">Name:</td>
        <td style="width: 33%;"><input type="text" name="ime" style="width: 100%; box-sizing: border-box;"></td>
        <td style="width: 33%;"><!-- 可放置校验提示信息 --></td>
      </tr>
      <tr>
        <td>Username:</td>
        <td><input type="text" name="username" style="width: 100%; box-sizing: border-box;"></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="3" align="center" style="padding-top: 10px;">
          <input type="submit" value="Submit" name="send">
        </td>
      </tr>
    </form>
  </table>
</fieldset>

关键说明 #

• 添加table-layout: fixed后，列宽会按照设置的比例均分，不会被输入框内容撑开
• 第三列可以预留放置表单校验错误提示的位置，匹配参考图的布局需求
• form嵌套在table内部后，表单的原生提交、数据序列化功能都不受影响，可正常添加校验逻辑

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