CSS: Force column alignment between cells in different rows

Question

I had a 13 column table nicely aligned until I added input fields, which broke alignment in the column (vertical) direction. Reducing input size to 3vw didn't help, and now the cells in that row are too small relative to the other rows and cells.

I also tried adding a colSpan to the data cells and headers, but it had no effect.

How can I align the columns of the following table:

<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>

score 0 · Answer 1 · answered Jul 12 '18 at 23:40

you cannot wrap td elements inside a form. you have to wrap the whole table :

<form>
    <table>
        <tr>
            <td><input type="text" value="10" class=""></td>
            ....
        </tr>
    </table>
</form>

also there is no className attribute. you have to use class=""

input values should be in the value attribute

score 0 · Accepted Answer · answered Jul 12 '18 at 23:41

A form is not allowed to be a child element of a table, tbody or tr.

You can have an entire table inside a form. You can have a form inside a table cell. Bu you cannot have part of a table inside a form.

See similar: Form inside a table

To fix your issue, you will need to wrap your whole table inside the form.

Remove the form from below:

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

And wrap your whole table:

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

See docs, HTML form tag.

CSS: Force column alignment between cells in different rows

2 Answers2