How to insert multiple forms inside a table row in CSS?

Question

I was building a Wishlist/Cart table using the HTML table structure and I needed to insert multiple forms for every single table row. But none of the following solutions are valid because putting a form tag inside the structure of a table is not allowed and it breaks the structure of the table.

<table>
  <thead>
    <tr>
      <th>1st column</th>
      <th>2nd column</th>
      <th>3rd column</th>
    </tr>
  </thead>
  <tbody>
    <form id="1st_row_form">
      <tr>
        <td><input value="1 1"></td>
        <td><input value="1 2"></td>
        <td><input value="1 3"></td>
      </tr>
    </form>
    <form id="2nd_row_form">
      <tr>
        <td><input value="2 1"></td>
        <td><input value="2 2"></td>
        <td><input value="2 3"></td>
      </tr>
    </form>
  </tbody>
</table>

or:

<table>
  <thead>
    <tr>
      <th>1st column</th>
      <th>2nd column</th>
      <th>3rd column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <form id="1st_row_form">
        <td><input value="1 1"></td>
        <td><input value="1 2"></td>
        <td><input value="1 3"></td>
      </form>
    </tr>
    <tr>
      <form id="2nd_row_form">
        <td><input value="2 1"></td>
        <td><input value="2 2"></td>
        <td><input value="2 3"></td>
      </form>
    </tr>
  </tbody>
</table>

Answer 1

I found this solution that works perfectly for me using CSS tables:

<div style="display:table;width:100%;">
  <div style="display: table-header-group">
    <div style="display:table-row;">
      <div class="table-cell">1st column</div>
      <div class="table-cell">2nd column</div>
      <div class="table-cell">3rd column</div>
    </div>
  </div>
  <div style="display: table-row-group;">
    <form id="1st_row_form" style="display:table-row;">
      <div class="table-cell"><input value="1 1"></div>
      <div class="table-cell"><input value="1 2"></div>
      <div class="table-cell"><input value="1 3"></div>
    </form>
    <form id="2nd_row_form" style="display:table-row;">
      <div class="table-cell"><input value="2 1"></div>
      <div class="table-cell"><input value="2 2"></div>
      <div class="table-cell"><input value="2 3"></div>
    </form>
  </div>
</div>