我正在尝试创建一个表格,其中每一行都是一个表格。我希望每个输入都在不同的表分区中,但是例如,我仍然需要所有所有第一个输入都属于同一个表头,依此类推。
我想做的是一个可编辑的网格 ,或多或少这样:
<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验证程序所说的也是如此)。
有什么好办法吗?
如果你想要一个“编辑网格”,即像结构的表格,可以让你做任何行的形式,使用CSS,模仿表标签的布局:display:table,display:table- row,和display:table-cell。
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声明才能使其进入“标准”模式:(尝试使用此方法或等效方法)
<!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数据表。他们大多数都这样做。
请注意,你也可以模仿THEAD,TBODY,通过包装与另一个DIV你行组TFOOT display: table-header- group,table-row-group和table-footer-group分别。
display: table-header- group
table-row-group
table-footer-group
注意: 使用此方法不能做的唯一事情就是colspan。