如何在 CSS 中的表格行内插入多个表单？ [复制]

Question

我正在使用 HTML 表格结构构建愿望清单/购物车表格，我需要为每个表格行插入多个表格。但以下解决方案均无效，因为不允许在表格结构中放置表单标签，并且会破坏表格结构。

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

或：

<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

我发现这个解决方案非常适合我使用 CSS 表格：

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