表格布局----基于bootstrap样式 布局
2018-06-24 01:31:38来源：未知 阅读 ()
在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处Excel的样式，感觉非常糟糕，这次我就写了一个表单，不足之处，希望大神们多多指教；
代码如下：
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 #cardetail{ 12 color:#fff; 13 font-size:16px; 14 } 15 .table-header{ 16 height: 66px; 17 font-size: 22px; 18 background:rgba(224,226,230,.8); 19 } 20 .table-user{ 21 height: 60px; 22 font-size: 20px; 23 } 24 25 .table-list{ 26 height:35px; 27 } 28 </style> 29 </head> 30 <body class="body-white"> 31 <!-- 车辆详情部分表格 --> 32 <div class="wrapper"> 33 <div class="table-responsive"> 34 <table id="cardetail" class="table table-bordered"> 35 <tbody> 36 <tr class="table-header"> 37 <td width="130"><i class="fa fa-pencil"></i> 档案编号: </td> 38 <td colspan="24" id="number" name="user[number]">123456996</td> 39 </tr> 40 </tbody> 41 <tbody id="car"> 42 <tr class="table-user"> 43 <td colspan="26">主车信息</td> 44 </tr> 45 <tr class="table-list"> 46 <td>车牌号：</td> 47 <td id="hcardNum">鲁JK345</td> 48 <td>大架号：</td> 49 <td id="hcard" colspan="4">LA9940Zc506FDSS218</td> 50 <td colspan="2">车辆类型：</td> 51 <td id="hcardType" colspan="12">重型货车</td> 52 </tr> 53 <tr class="table-list"> 54 <td>发动机型号：</td> 55 <td id="hcardNum">鲁JK345</td> 56 <td class="tableName" >注册日期：</td> 57 <td id="hcard" colspan="4">2016-06-26</td> 58 <td class="tableName" colspan="2">厂牌型号</td> 59 <td id="hcardType" colspan="12">东风天龙</td> 60 </tr> 61 <tr class="table-list"> 62 <td class="tableName">行驶证到期日期：</td> 63 <td id="hcardNum" colspan="2">2016-05-30</td> 64 <td class="tableName" >运营证到期日期：</td> 65 <td id="hcard" colspan="4">2016-08-30</td> 66 <td class="tableName" colspan="2">车辆状态：</td> 67 <td id="hcardType" colspan="12">正常</td> 68 </tr> 69 <tr class="table-list"> 70 <td>挂靠详情：</td> 71 <td id="hcardNum">挂靠费</td> 72 <td>150</td> 73 <td id="hcard">审运营费</td> 74 <td>5000</td> 75 <td>委托费</td> 76 <td>3000</td> 77 <td>安全会议费</td> 78 <td>300</td> 79 <td>GPS费</td> 80 <td>600</td> 81 <td>其他</td> 82 <td>500</td> 83 <td>共计</td> 84 <td>60000</td> 85 </tr> 86 <tr class="table-list"> 87 <td class="tableName">挂靠日期：</td> 88 <td id="hcardNum">2016-09-30</td> 89 <td class="tableName">收费日期</td> 90 <td id="hcard" colspan="3">2016-06-30</td> 91 <td class="tableName" colspan="2">挂靠备注</td> 92 <td id="hcardType" colspan="7">********</td> 93 </tr> 94 <tr class="table-list"> 95 <td class="tableName">主车备注：</td> 96 <td id="hcardNum" colspan="26">鲁JK345</td> 97 </tr> 98 <tr class="table-list"> 99 <td class="tableName">商险详情：</td> 100 <td id="hcardNum">投保日期</td> 101 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td> 102 <td id="hcard" colspan="1">金额</td> 103 <td class="tableName" colspan="1">3000</td> 104 <td id="hcardType" colspan="1">保险公司</td> 105 <td id="hcardType" colspan="2">人保</td> 106 <td id="hcardType" colspan="2">代理人</td> 107 <td id="hcardType" colspan="6">张三丰</td> 108 </tr> 109 <tr class="table-list"> 110 <td class="tableName">商险种类：</td> 111 <td id="hcardNum">三者险 </td> 112 <td>200</td> 113 <td id="hcard" >车损险 </td> 114 <td colspan="2">400</td> 115 <td id="hcardType">驾驶员险 </td> 116 <td id="hcardType" colspan="2">500</td> 117 <td id="hcardType">乘客险 </td> 118 <td id="hcardType" colspan="3">300</td> 119 <td id="hcardType">不计免赔险 </td> 120 <td id="hcardType" colspan="4">500</td> 121 </tr> 122 <tr class="table-list"> 123 <td class="tableName">强险详情：</td> 124 <td id="hcardNum">投保日期：</td> 125 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td> 126 <td id="hcard">金额</td> 127 <td class="tableName" colspan="1">1300</td> 128 <td id="hcardType" colspan="1">保险公司</td> 129 <td id="hcardType" colspan="2">人保</td> 130 <td id="hcardType" colspan="2"> 代理人</td> 131 <td id="hcardType" colspan="6">上官飞燕</td> 132 </tr> 133 <tr class="table-list"> 134 <td class="tableName">保险备注：</td> 135 <td id="hcardNum" colspan="24">鲁JK345132132123123132</td> 136 </tr> 137 </tbody> 138 <tbody id="guacar"> 139 <tr class="table-user"> 140 <td colspan="26">挂车信息</td> 141 </tr> 142 <tr class="table-list"> 143 <td>车牌号：</td> 144 <td id="hcardNum">鲁JK345</td> 145 <td>大架号：</td> 146 <td id="hcard" colspan="4">LA9940Zc506FDSS218</td> 147 <td colspan="2">车辆类型：</td> 148 <td id="hcardType" colspan="12">重型货车</td> 149 </tr> 150 <tr class="table-list"> 151 <td>发动机型号：</td> 152 <td id="hcardNum">鲁JK345</td> 153 <td class="tableName" colspan="2">注册日期：</td> 154 <td id="hcard" colspan="3">2016-06-26</td> 155 <td class="tableName" colspan="2">厂牌型号</td> 156 <td id="hcardType" colspan="12">东风天龙</td> 157 </tr> 158 <tr class="table-list"> 159 <td class="tableName" colspan="2">行驶证到期日期：</td> 160 <td id="hcardNum" colspan="2">2016-05-30</td> 161 <td class="tableName" colspan="3">运营证到期日期：</td> 162 <td id="hcard" colspan="3">2016-08-30</td> 163 <td class="tableName" colspan="2">车辆状态：</td> 164 <td id="hcardType" colspan="8">正常</td> 165 </tr> 166 <tr class="table-list"> 167 <td>挂靠详情：</td> 168 <td id="hcardNum">挂靠费</td> 169 <td>150</td> 170 <td id="hcard">审运营费</td> 171 <td>5000</td> 172 <td>委托费</td> 173 <td>3000</td> 174 <td>安全会议费</td> 175 <td>300</td> 176 <td>GPS费</td> 177 <td>600</td> 178 <td>其他</td> 179 <td>500</td> 180 <td>共计</td> 181 <td>60000</td> 182 </tr> 183 <tr class="table-list"> 184 <td class="tableName">挂靠日期：</td> 185 <td id="hcardNum" colspan="3">2016-09-30</td> 186 <td class="tableName" colspan="2">收费日期</td> 187 <td id="hcard" colspan="3">2016-06-30</td> 188 <td class="tableName" colspan="2">挂靠备注</td> 189 <td id="hcardType" colspan="6">********</td> 190 </tr> 191 <tr class="table-list"> 192 <td class="tableName">主车备注：</td> 193 <td id="hcardNum" colspan="26">鲁JK345</td> 194 </tr> 195 <tr class="table-list"> 196 <td class="tableName">商险详情：</td> 197 <td id="hcardNum">投保日期</td> 198 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td> 199 <td id="hcard" colspan="1">金额</td> 200 <td class="tableName" colspan="1">3000</td> 201 <td id="hcardType" colspan="1">保险公司</td> 202 <td id="hcardType" colspan="2">人保</td> 203 <td id="hcardType" colspan="2">代理人</td> 204 <td id="hcardType" colspan="6">张三丰</td> 205 </tr> 206 <tr class="table-list"> 207 <td class="tableName">商险种类：</td> 208 <td id="hcardNum">三者险 </td> 209 <td>200</td> 210 <td id="hcard" >车损险 </td> 211 <td colspan="2">400</td> 212 <td id="hcardType" colspan="2">驾驶员险 </td> 213 <td id="hcardType" colspan="2">500</td> 214 <td id="hcardType" colspan="2">乘客险 </td> 215 <td id="hcardType" >300</td> 216 <td id="hcardType">不计免赔险 </td> 217 <td id="hcardType" colspan="4">500</td> 218 </tr> 219 <tr class="table-list"> 220 <td class="tableName">强险详情：</td> 221 <td id="hcardNum">投保日期：</td> 222 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td> 223 <td id="hcard">金额</td> 224 <td class="tableName" colspan="1">1300</td> 225 <td id="hcardType" colspan="1">保险公司</td> 226 <td id="hcardType" colspan="2">人保</td> 227 <td id="hcardType" colspan="2"> 代理人</td> 228 <td id="hcardType" colspan="6">上官飞燕</td> 229 </tr> 230 <tr class="table-list"> 231 <td class="tableName">保险备注：</td> 232 <td id="hcardNum" colspan="24">鲁JK345132132123123132</td> 233 </tr> 234 </tbody> 235 <tbody id="car"> 236 <tr class="table-user"> 237 <td colspan="26">车主信息</td> 238 </tr> 239 <tr class="table-list"> 240 <td>姓名：</td> 241 <td id="hcardNum">张三丰</td> 242 <td>电话：</td> 243 <td id="hcard" colspan="2">187****6129</td> 244 <td colspan="2">备用电话</td> 245 <td id="hcardType" colspan="3">157****6629</td> 246 <td colspan="3">区域</td> 247 <td id="hcardType" colspan="3">济南</td> 248 </tr> 249 <tr class="table-list"> 250 <td class="tableName">身份证号码</td> 251 <td id="hcardNum" colspan="3">6228211994........</td> 252 <td colspan="2">地址</td> 253 <td id="hcard" colspan="10">山东省济南市历城区外滩南区12单元1801</td> 254 </tr> 255 <tr class="table-list"> 256 <td>驾驶员：</td> 257 <td id="hcardNum" colspan="2">张三丰</td> 258 <td colspan="2">驾驶证号：</td> 259 <td id="hcard" colspan="5">370126198704250714</td> 260 <td colspan="2">上岗证：</td> 261 <td colspan="5">15694921333654</td> 262 </tr> 263 <tr class="table-list"> 264 <td class="tableName">主车备注：</td> 265 <td id="hcardNum" colspan="26">鲁JK345</td> 266 </tr> 267 </tbody> 268 </table> 269 </div> 270 </div> 271 <script type="text/javascript" src="jquery-1.11.0.min.js"></script> 272 <script src="js/xlsx.core.min.js"></script> 273 <script src="js/blob.js"></script> 274 <script src="js/FileSaver.min.js"></script> 275 <script src="js/tableexport.js"></script> 276 <script> 277 $(function(){ 278 $("table").tableExport({formats:["xlsx","xls","csv","txt"]}); 279 }) 280 </script> 281 </body> 282 </html>
这里主要用了colspan,但是这个好像也不是太好，不知道大家是怎么去处理的。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：CSS3动画功能
相关文章
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-02
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签