我正在尝试创建一个表，其中每一行都是一个表单。我希望每个输入都在不同的表分区中，但我仍然需要它，例如，所有第一个输入都属于同一个表头等等。
我正在尝试做的是一个可编辑的网格，或多或少是这样的:
<table>
<tr>
<form method="POST" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
<tr>
<form method="POST" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
</table>
但显然我不能以那种方式排列标签(或者 w3c 验证器是这么说的)。
有什么好的方法吗？
最佳答案
如果您想要一个“可编辑的网格”，即允许您将任何行制作为表单的类似表格的结构，请使用模仿 TABLE 标签布局的 CSS:display:table, display:table-row 和 display:table-cell。
无需将整个表格包装在一个表格中，也无需为表格的每一行创建单独的表格和表格。
试试这个:
<style>
DIV.table
{
display:table;
}
FORM.tr, DIV.tr
{
display:table-row;
}
SPAN.td
{
display:table-cell;
}
</style>
...
<div class="table">
<form class="tr" method="post" action="blah.html">
<span class="td"><input type="text"/></span>
<span class="td"><input type="text"/></span>
</form>
<div class="tr">
<span class="td">(cell data)</span>
<span class="td">(cell data)</span>
</div>
...
</div>
将整个 TABLE 包装在一个 FORM 中的问题是任何和所有表单元素都将在提交时发送(也许这是需要的，但可能不是)。此方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。
用 FORM 标签包裹 TR 标签(或 TR 包裹 FORM)的问题在于它是无效的 HTML。 FORM 仍将允许像往常一样提交，但此时 DOM 已损坏。注意:尝试使用 JavaScript 获取 FORM 或 TR 的子元素，这可能会导致意外结果。
请注意，IE7 不支持这些 CSS 表格样式，IE8 需要文档类型声明才能使其进入“标准”模式:(试试这个或类似的东西)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
任何其他支持 display:table、display:table-row 和 display:table-cell 的浏览器都应该像使用 TABLE、TR 和 TD 标签一样显示您的 css 数据表。他们中的大多数人都这样做。
请注意，您还可以通过使用 display: table-header-group、table-row-group 将行组包装在另一个 DIV 中来模仿 THEAD、TBODY、TFOOT和 table-footer-group 分别。
注意:唯一不能使用此方法的是 colspan。
关于html - 创建一个 HTML 表格，其中每个 TR 都是一个 FORM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4035966/