表格布局----基于bootstrap样式 布局
程序员文章站
2022-04-15 18:12:57
...
在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处Excel的样式，感觉非常糟糕，这次我就写了一个表单，不足之处，希望大神们多多指教；
代码如下：
<html>
<head></head>
<body class="body-white">
1 2 3 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?1.1.11" /> 9
<link rel="stylesheet" href="style.css?1.1.11" /> 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 30 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?1.1.11"></script>272
<script src="js/xlsx.core.min.js?1.1.11"></script>273
<script src="js/blob.js?1.1.11"></script>274
<script src="js/FileSaver.min.js?1.1.11"></script>275
<script src="js/tableexport.js?1.1.11"></script>276
<script>277 $(function(){278 $("table").tableExport({formats:["xlsx","xls","csv","txt"]});279 })280 </script>281 282
</body>
</html>这里主要用了colspan,但是这个好像也不是太好，不知道大家是怎么去处理的。
以上就是表格布局----基于bootstrap样式 布局的详细内容，更多请关注其它相关文章！
上一篇： 24个canvas基础知识小结_html5教程技巧
下一篇： MySQL存储引擎详解