稍微手寫了幾個類似table 的布局， 用div 來實現類table的布局。感覺還是沒辦法做到table 的效果。最終，還是使用table 來實現了。
可能用div 也能實現table的布局效果，但是還需要在摸索一下，目前先用table來實現。
一個table 中 可以有多個tbody.
參考： https://www.imooc.com/qadetail/279392
https://blog.csdn.net/zhi_jie/article/details/80698828
--------------------------------
如果表格很長，用tbody分段，這句話的意思，table里面可以有多個tbody? 那thead，tfoot這些呢？多了會報錯嗎？
如果表格很長，用tbody分段，這句話的意思，table里面可以有多個tbody? 那thead，tfoot這些呢？多了會報錯嗎？
2018-09-11源自：初識HTML(5)+CSS(3)-2020升級版 5-61876 瀏覽3 回答
如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，不必等待表格結束后在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。
----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if IE 8]> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <![endif]--> <title>無標題文檔</title> <style type="text/css"> html { height: 100%; font-size: 13px; } body { font-family: "宋體"; line-height: 24px; color: #333; background: #FFF; width: 100%; height: 100%; margin: 0; padding: 0; } th, td { margin: 0; padding: 0; } table { *border-style: solid; *border-color: #333; *border-width: 1px 0 0 1px; font-size: 16px; border-collapse: collapse; } table td, table th { border-width: 1px; *border-width: 0 1px 1px 0; border-style: solid; border-color: #333; background-color: #ffffff; padding: 12px 10px; box-sizing: border-box; text-align: justify; text-justify: inter-ideograph; } table th { background-color: #dedede; text-align: center; } .border0 { padding: 0; *border-width: 0; } .border0 table { margin-left: -1px; margin-left: 0\9; border-style: hidden; *border-style: solid; border-width: 0; } .jusall { text-align-last: justify; } .textcenter { text-align: center } .textright { text-align: right } </style> </head> <body> <h1 style="text-align:center;padding:60px 0 10px;">道路運輸駕駛員誠信考核表</h1> <table width="960" align="center"> <tr> <td colspan="2" class="textcenter">以下由駕駛員填寫</td> </tr> <tr> <td colspan="2" class="border0"> <table width="100%"> <tr> <td width="150" class="textcenter">姓名</td> <td class="border0"> <table width="100%"> <tr> <td width="300"> </td> <td width="100">性別</td> <td>男 □ 女 □</td> </tr> </table> </td> <td width="120" rowspan="4" class="textcenter">照片</td> </tr> <tr> <td class="textcenter">身份證號</td> <td class="border0"> <table width="100%"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td class="textcenter">住址</td> <td> </td> </tr> <tr> <td class="textcenter">聯系電話</td> <td> </td> </tr> </table> </td> </tr> <tr> <td width="150" class="textcenter">從業資格證號</td> <td class="border0"> <table width="100%"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td class="textcenter">服務單位</td> <td>道路旅客運輸 □ 道路貨物運輸 □ 道路危險貨物運輸 □ </td> </tr> </table> </body> </html>效果：