Question

我正在使用HTML表格结构构建Wishlist / Cart表格，我需要为每个表格行插入多个表单。但是以下解决方案都不是有效的，因为不允许在表结构中放置表单标记，并且它会破坏表的结构。

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

如何在CSS中的表行中插入多个表单？

1 个答案: