ถ้าคุณต้องการ "ตารางที่สามารถแก้ไขได้" คือตารางเช่นโครงสร้างที่ช่วยให้คุณทำการใด ๆ แถวรูปแบบการใช้ 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>
ปัญหาเกี่ยวกับการห่อทั้งตารางในรูปแบบคือองค์ประกอบใด ๆ และแบบฟอร์มทั้งหมดจะถูกส่งเมื่อส่ง (อาจเป็นที่ต้องการ แต่อาจจะไม่) วิธีนี้ช่วยให้คุณสามารถกำหนดรูปแบบสำหรับแต่ละ "แถว" และส่งเฉพาะแถวของข้อมูลที่ส่ง
ปัญหาเกี่ยวกับการตัดแท็ก FORM รอบ ๆ แท็ก TR (หรือ TR รอบ FORM) คือ HTML ที่ไม่ถูกต้อง ฟอร์มจะยังอนุญาตให้ส่งได้ตามปกติ แต่ ณ จุดนี้ DOM ใช้งานไม่ได้ หมายเหตุ: ลองรับองค์ประกอบย่อยของ FORM หรือ TR ด้วย JavaScript ซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิด
โปรดทราบว่า 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 ควรแสดงตารางข้อมูล css ของคุณเหมือนกับที่คุณใช้ถ้าคุณใช้แท็ก TABLE, TR และ TD ส่วนใหญ่ทำ
ทราบว่าคุณสามารถ THEAD ยังเลียนแบบ TBODY, TFOOT โดยการตัดกลุ่มแถวใน DIV อีกด้วยdisplay: table-header-group
, table-row-group
และtable-footer-group
ตามลำดับ
หมายเหตุ:สิ่งเดียวที่คุณไม่สามารถทำได้ด้วยวิธีนี้คือ colspan
ลองดูภาพประกอบนี้: http://jsfiddle.net/ZRQPP/
<form>
<tr>
ไม่สามารถใส่ใน