如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用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 > <form method="post" action="blah.html"> <span ><input type="text"/></span> <span ><input type="text"/></span> </form> <div > <span >(cell data)</span> <span >(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分别。
注意： 使用此方法不能做的唯一事情就是colspan。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）