HTML:表格？

Question

我经常发现自己想要制作一个表格表格——一堆行，每一行都是一个单独的表格，有自己的字段和提交按钮。例如，这是一个宠物店应用程序示例——假设这是一个结帐屏幕，您可以选择更新所选宠物的数量和属性，并在结帐前保存更改:

Pet    Quantity Color Variety   Update
snake         4 black rattle    update
puppy         3 pink  dalmatian update

我希望能够使用如下所示的 HTML 来执行此操作:

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
     <tr>
          <form>
            <td>snake<input type="hidden" name="cartitem" value="55"></td>
            <td><input name="count" value=4/></td>
            <td><select name="color"></select></td>
            <td><select name="variety"></select></td>
            <td><input type="submit"></td>
          </form>
     </tr>
</tbody>
</table>

这基本上是一个充满表格的表格，每行一个表格。点击更新一次允许您更新该特定行(这不是一个真实的例子，我的真实应用程序确实需要行的独立性)。

但这不是有效的 HTML。根据规范，<form>必须完全在 <td> 内或完全在 <table> 之外.这个无效的 html 破坏了 javascript 库，处理起来非常痛苦。

我最终制作了一张包含列标题的表格，然后为每个表格制作了一张表格。但这需要固定的列宽才能将输入排列在整齐的列中，这是低于标准的。你最终如何处理这个问题？我缺少一个明显的简单解决方案吗？如何制作表格表格？

Answer 1

您可以使用 css 为其他元素提供表格布局。

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

然后您使用以下有效的 html。

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value=4/></div>
    </form>
</div>