html - CSS:强制不同行中的单元格之间的列对齐

Question

在我添加输入字段之前，我有一个 13 列的表格很好地对齐，这打破了列(垂直)方向的对齐方式。将输入大小减小到 3vw 没有帮助，现在该行中的单元格相对于其他行和单元格来说太小了。

我还尝试向数据单元格和标题添加 colSpan，但没有效果。

如何对齐下表的列:

<table className={style2}>
  <thead>
    <tr>
      <th colSpan={13}>
        <h3 className={cell_style}>Today: Workout A: TB Stool, TB Rows, DB Incline, Lat Raises
        </h3>
      </th>
    </tr>
    <tr>
      <th className={cell_style}>#</th>
      <th colSpan={3} className={cell_style}>TB Stool</th>
      <th colSpan={3} className={cell_style}>TB Rows</th>
      <th colSpan={3} className={cell_style}>DB Incline</th>
      <th colSpan={3} className={cell_style}>Lat Raises</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td className={cell_style}>#</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>
    </tr>

    <tr>
      <form action="">
        <td className={cell_style} colSpan={1}>#</td>

        <td className={cell_style} colSpan={1}><input type="text" className={input_style} value='50' /></td>
        <td className={cell_style}><input type="text" className={input_style}/>15</td>
        <td className={cell_style}><input type="text" className={input_style}/>0</td>

        <td className={cell_style}><input type="text" className={input_style}/>58</td>
        <td className={cell_style}><input type="text" className={input_style}/>14</td>
        <td className={cell_style}><input type="text" className={input_style}/>2</td>

        <td className={cell_style}><input type="text" className={input_style}/>20</td>
        <td className={cell_style}><input type="text" className={input_style}/>13</td>
        <td className={cell_style}><input type="text" className={input_style}/>1</td>

        <td className={cell_style}><input type="text" className={input_style}/>5</td>
        <td className={cell_style}><input type="text" className={input_style}/>15</td>
        <td className={cell_style}><input type="text" className={input_style}/>0</td>

      </form>
    </tr>

  </tbody>

</table>

Answer 1

form 不允许是 table、tbody 或 tr 的子元素。

您可以在 form 中包含整个表格。您可以在表格单元格中包含一个 form。但是您不能在表单中包含表格的一部分。

查看类似内容:Form inside a table

要解决您的问题，您需要将整个表格包裹在表单中。

从下面删除表单:

<tr>
   <form action="">
   [...]
   </form>
</tr>

然后包裹你的整个 table :

<form action="">
   <table className={style2}>
   [...]
   </table>
<form>

参见文档，HTML form tag .