码迷,mamicode.com
首页 > 其他好文 > 详细

表格布局----基于bootstrap样式 布局

时间:2017-06-26 22:40:01      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:header   class   ***   style   utf-8   ons   hit   电话   单元   

在实际开发中,我们通过菜鸟教程复制的表格往往不能满足我们的开发需求,样式很难看,而且不能自适应,尤其是需要到处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>&nbsp;档案编号: </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">三者险&nbsp;</td>
112                 <td>200</td>
113                 <td id="hcard" >车损险&nbsp;</td>
114                 <td colspan="2">400</td>
115                 <td  id="hcardType">驾驶员险&nbsp;</td>
116                 <td id="hcardType" colspan="2">500</td>
117                 <td id="hcardType">乘客险&nbsp;</td>
118                 <td id="hcardType" colspan="3">300</td>
119                 <td id="hcardType">不计免赔险&nbsp;</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">三者险&nbsp;</td>
209                 <td>200</td>
210                 <td id="hcard" >车损险&nbsp;</td>
211                 <td colspan="2">400</td>
212                 <td  id="hcardType" colspan="2">驾驶员险&nbsp;</td>
213                 <td id="hcardType" colspan="2">500</td>
214                 <td id="hcardType" colspan="2">乘客险&nbsp;</td>
215                 <td id="hcardType" >300</td>
216                 <td id="hcardType">不计免赔险&nbsp;</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,但是这个好像也不是太好,不知道大家是怎么去处理的。

 

表格布局----基于bootstrap样式 布局

标签:header   class   ***   style   utf-8   ons   hit   电话   单元   

原文地址:http://www.cnblogs.com/starryqian/p/7082529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!