随笔- 1793 文章- 1 评论- 61 阅读- 298万

一个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这些呢？多了会报错吗？

2018-09-11源自：初识HTML(5)+CSS(3)-2020升级版 5-61876 浏览3 回答

weixin_mIP568

如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

----------------------------------

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<!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>