稍微手写了几个类似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; 100%; height: 100%; margin: 0; padding: 0; } th, td { margin: 0; padding: 0; } table { *border-style: solid; *border-color: #333; *border- 1px 0 0 1px; font-size: 16px; border-collapse: collapse; } table td, table th { border- 1px; *border- 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- 0; } .border0 table { margin-left: -1px; margin-left: 09; border-style: hidden; *border-style: solid; border- 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>效果：