好好爱自己!

一个table 中 可以有多个tbody. table 可以嵌套

稍微手写了几个类似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这些呢?多了会报错吗?

如果不加<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>

  效果: 

 

 

posted @ 2021-04-01 09:16  立志做一个好的程序员  阅读(1429)  评论(0编辑  收藏  举报

不断学习创作,与自己快乐相处