table
Posted dancer0321
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table相关的知识，希望对你有一定的参考价值。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>查询详情</title> 5 <meta name="keywords" content=""/> 6 <meta name="description" content=""> 7 <meta charset="utf-8"> 8 <link rel="stylesheet" href="bootstrap.min.css"> 9 <link rel="stylesheet" href="style.css"> 10 <style> 11 .body-white{ 12 background: purple; 13 } 14 #cardetail{ 15 color:#fff; 16 font-size:16px; 17 } 18 .table-header{ 19 height: 66px; 20 font-size: 22px; 21 background:rgba(224,226,230,.8); 22 } 23 .table-user{ 24 height: 60px; 25 font-size: 20px; 26 } 27 28 .table-list{ 29 height:35px; 30 } 31 table,table tr th, table tr td { border:1px solid #0094ff; } 32 33 </style> 34 </head> 35 <body class="body-white"> 36 <!-- 车辆详情部分表格 --> 37 <div class="wrapper"> 38 <div class="table-responsive"> 39 <table id="cardetail" class="table table-bordered" cellspacing="0"> 40 <tbody> 41 <tr class="table-header"> 42 <td width="130"><i class="fa fa-pencil"></i> 档案编号: </td> 43 <td colspan="24" id="number" name="user[number]">123456996</td> 44 </tr> 45 </tbody> 46 <tbody id="car"> 47 <tr class="table-user"> 48 <td colspan="26">主车信息</td> 49 </tr> 50 <tr class="table-list"> 51 <td>车牌号：</td> 52 <td id="hcardNum">鲁JK345</td> 53 <td>大架号：</td> 54 <td id="hcard" colspan="4">LA9940Zc506FDSS218</td> 55 <td colspan="2">车辆类型：</td> 56 <td id="hcardType" colspan="12">重型货车</td> 57 </tr> 58 <tr class="table-list"> 59 <td>发动机型号：</td> 60 <td id="hcardNum">鲁JK345</td> 61 <td class="tableName" >注册日期：</td> 62 <td id="hcard" colspan="4">2016-06-26</td> 63 <td class="tableName" colspan="2">厂牌型号</td> 64 <td id="hcardType" colspan="12">东风天龙</td> 65 </tr> 66 <tr class="table-list"> 67 <td class="tableName">行驶证到期日期：</td> 68 <td id="hcardNum" colspan="2">2016-05-30</td> 69 <td class="tableName" >运营证到期日期：</td> 70 <td id="hcard" colspan="4">2016-08-30</td> 71 <td class="tableName" colspan="2">车辆状态：</td> 72 <td id="hcardType" colspan="12">正常</td> 73 </tr> 74 <tr class="table-list"> 75 <td>挂靠详情：</td> 76 <td id="hcardNum">挂靠费</td> 77 <td>150</td> 78 <td id="hcard">审运营费</td> 79 <td>5000</td> 80 <td>委托费</td> 81 <td>3000</td> 82 <td>安全会议费</td> 83 <td>300</td> 84 <td>GPS费</td> 85 <td>600</td> 86 <td>其他</td> 87 <td>500</td> 88 <td>共计</td> 89 <td>60000</td> 90 </tr> 91 <tr class="table-list"> 92 <td class="tableName">挂靠日期：</td> 93 <td id="hcardNum">2016-09-30</td> 94 <td class="tableName">收费日期</td> 95 <td id="hcard" colspan="3">2016-06-30</td> 96 <td class="tableName" colspan="2">挂靠备注</td> 97 <td id="hcardType" colspan="7">********</td> 98 </tr> 99 <tr class="table-list"> 100 <td class="tableName">主车备注：</td> 101 <td id="hcardNum" colspan="26">鲁JK345</td> 102 </tr> 103 <tr class="table-list"> 104 <td class="tableName">商险详情：</td> 105 <td id="hcardNum">投保日期</td> 106 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td> 107 <td id="hcard" colspan="1">金额</td> 108 <td class="tableName" colspan="1">3000</td> 109 <td id="hcardType" colspan="1">保险公司</td> 110 <td id="hcardType" colspan="2">人保</td> 111 <td id="hcardType" colspan="2">代理人</td> 112 <td id="hcardType" colspan="6">张三丰</td> 113 </tr> 114 <tr class="table-list"> 115 <td class="tableName">商险种类：</td> 116 <td id="hcardNum">三者险 </td> 117 <td>200</td> 118 <td id="hcard" >车损险 </td> 119 <td colspan="2">400</td> 120 <td id="hcardType">驾驶员险 </td> 121 <td id="hcardType" colspan="2">500</td> 122 <td id="hcardType">乘客险 </td> 123 <td id="hcardType" colspan="3">300</td> 124 <td id="hcardType">不计免赔险 </td> 125 <td id="hcardType" colspan="4">500</td> 126 </tr> 127 <tr class="table-list"> 128 <td class="tableName">强险详情：</td> 129 <td id="hcardNum">投保日期：</td> 130 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td> 131 <td id="hcard">金额</td> 132 <td class="tableName" colspan="1">1300</td> 133 <td id="hcardType" colspan="1">保险公司</td> 134 <td id="hcardType" colspan="2">人保</td> 135 <td id="hcardType" colspan="2"> 代理人</td> 136 <td id="hcardType" colspan="6">上官飞燕</td> 137 </tr> 138 <tr class="table-list"> 139 <td class="tableName">保险备注：</td> 140 <td id="hcardNum" colspan="24">鲁JK345132132123123132</td> 141 </tr> 142 </tbody> 143 <tbody id="guacar"> 144 <tr class="table-user"> 145 <td colspan="26">挂车信息</td> 146 </tr> 147 <tr class="table-list"> 148 <td>车牌号：</td> 149 <td id="hcardNum">鲁JK345</td> 150 <td>大架号：</td> 151 <td id="hcard" colspan="4">LA9940Zc506FDSS218</td> 152 <td colspan="2">车辆类型：</td> 153 <td id="hcardType" colspan="12">重型货车</td> 154 </tr> 155 <tr class="table-list"> 156 <td>发动机型号：</td> 157 <td id="hcardNum">鲁JK345</td> 158 <td class="tableName" colspan="2">注册日期：</td> 159 <td id="hcard" colspan="3">2016-06-26</td> 160 <td class="tableName" colspan="2">厂牌型号</td> 161 <td id="hcardType" colspan="12">东风天龙</td> 162 </tr> 163 <tr class="table-list"> 164 <td class="tableName" colspan="2">行驶证到期日期：</td> 165 <td id="hcardNum" colspan="2">2016-05-30</td> 166 <td class="tableName" colspan="3">运营证到期日期：</td> 167 <td id="hcard" colspan="3">2016-08-30</td> 168 <td class="tableName" colspan="2">车辆状态：</td> 169 <td id="hcardType" colspan="8">正常</td> 170 </tr> 171 <tr class="table-list"> 172 <td>挂靠详情：</td> 173 <td id="hcardNum">挂靠费</td> 174 <td>150</td> 175 <td id="hcard">审运营费</td> 176 <td>5000</td> 177 <td>委托费</td> 178 <td>3000</td> 179 <td>安全会议费</td> 180 <td>300</td> 181 <td>GPS费</td> 182 <td>600</td> 183 <td>其他</td> 184 <td>500</td> 185 <td>共计</td> 186 <td>60000</td> 187 </tr> 188 <tr class="table-list"> 189 <td class="tableName">挂靠日期：</td> 190 <td id="hcardNum" colspan="3">2016-09-30</td> 191 <td class="tableName" colspan="2">收费日期</td> 192 <td id="hcard" colspan="3">2016-06-30</td> 193 <td class="tableName" colspan="2">挂靠备注</td> 194 <td id="hcardType" colspan="6">********</td> 195 </tr> 196 <tr class="table-list"> 197 <td class="tableName">主车备注：</td> 198 <td id="hcardNum" colspan="26">鲁JK345</td> 199 </tr> 200 <tr class="table-list"> 201 <td class="tableName">商险详情：</td> 202 <td id="hcardNum">投保日期</td> 203 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td> 204 <td id="hcard" colspan="1">金额</td> 205 <td class="tableName" colspan="1">3000</td> 206 <td id="hcardType" colspan="1">保险公司</td> 207 <td id="hcardType" colspan="2">人保</td> 208 <td id="hcardType" colspan="2">代理人</td> 209 <td id="hcardType" colspan="6">张三丰</td> 210 </tr> 211 <tr class="table-list"> 212 <td class="tableName">商险种类：</td> 213 <td id="hcardNum">三者险 </td> 214 <td>200</td> 215 <td id="hcard" >车损险 </td> 216 <td colspan="2">400</td> 217 <td id="hcardType" colspan="2">驾驶员险 </td> 218 <td id="hcardType" colspan="2">500</td> 219 <td id="hcardType" colspan="2">乘客险 </td> 220 <td id="hcardType" >300</td> 221 <td id="hcardType">不计免赔险 </td> 222 <td id="hcardType" colspan="4">500</td> 223 </tr> 224 <tr class="table-list"> 225 <td class="tableName">强险详情：</td> 226 <td id="hcardNum">投保日期：</td> 227 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td> 228 <td id="hcard">金额</td> 229 <td class="tableName" colspan="1">1300</td> 230 <td id="hcardType" colspan="1">保险公司</td> 231 <td id="hcardType" colspan="2">人保</td> 232 <td id="hcardType" colspan="2"> 代理人</td> 233 <td id="hcardType" colspan="6">上官飞燕</td> 234 </tr> 235 <tr class="table-list"> 236 <td class="tableName">保险备注：</td> 237 <td id="hcardNum" colspan="24">鲁JK345132132123123132</td> 238 </tr> 239 </tbody> 240 <tbody id="car"> 241 <tr class="table-user"> 242 <td colspan="26">车主信息</td> 243 </tr> 244 <tr class="table-list"> 245 <td>姓名：</td> 246 <td id="hcardNum">张三丰</td> 247 <td>电话：</td> 248 <td id="hcard" colspan="2">187****6129</td> 249 <td colspan="2">备用电话</td> 250 <td id="hcardType" colspan="3">157****6629</td> 251 <td colspan="3">区域</td> 252 <td id="hcardType" colspan="3">济南</td> 253 </tr> 254 <tr class="table-list"> 255 <td class="tableName">身份证号码</td> 256 <td id="hcardNum" colspan="3">6228211994........</td> 257 <td colspan="2">地址</td> 258 <td id="hcard" colspan="10">山东省济南市历城区外滩南区12单元1801</td> 259 </tr> 260 <tr class="table-list"> 261 <td>驾驶员：</td> 262 <td id="hcardNum" colspan="2">张三丰</td> 263 <td colspan="2">驾驶证号：</td> 264 <td id="hcard" colspan="5">370126198704250714</td> 265 <td colspan="2">上岗证：</td> 266 <td colspan="5">15694921333654</td> 267 </tr> 268 <tr class="table-list"> 269 <td class="tableName">主车备注：</td> 270 <td id="hcardNum" colspan="26">鲁JK345</td> 271 </tr> 272 </tbody> 273 </table> 274 </div> 275 </div> 276 <script type="text/javascript" src="jquery-1.11.0.min.js"></script> 277 <script src="js/xlsx.core.min.js"></script> 278 <script src="js/blob.js"></script> 279 <script src="js/FileSaver.min.js"></script> 280 <script src="js/tableexport.js"></script> 281 <script> 282 $(function(){ 283 $("table").tableExport({formats:["xlsx","xls","csv","txt"]}); 284 }) 285 </script> 286 </body> 287 </html>
效果：
以上是关于table的主要内容，如果未能解决你的问题，请参考以下文章