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

林译川

2026-10-20 • 👁 0人浏览过

在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处excel的样式，感觉非常糟糕，这次我就写了一个表单，不足之处，希望大神们多多指教；代码如下：

 
 
 
   1  2  3  4 
  查询详情 5 
   6 
   7 
   8 
   9 
   10 
   29  30  31 
   32 
  
    33 
   
     34 
    
      35 
     
       36 
      
        37 
        38 
        39 
       40 
      41 
     
       42 
      
        43 
        44 
       45 
      
        46 
        47 
        48 
        49 
        50 
        51 
        52 
       53 
      
        54 
        55 
        56 
        57 
        58 
        59 
        60 
       61 
      
        62 
        63 
        64 
        65 
        66 
        67 
        68 
       69 
      
        70 
        71 
        72 
        73 
        74 
        75 
        76 
        77 
        78 
        79 
        80 
        81 
        82 
        83 
        84 
        85 
       86 
      
        87 
        88 
        89 
        90 
        91 
        92 
        93 
       94 
      
        95 
        96 
        97 
       98 
      
        99 
       100 
       101 
       102 
       103 
       104 
       105 
       106 
       107 
       108 
      109 
      
       110 
       111 
       112 
       113 
       114 
       115 
       116 
       117 
       118 
       119 
       120 
       121 
      122 
      
       123 
       124124 
       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 
       180 
       181 
       182 
      183 
      
       184 
       185 
       186 
       187 
       188 
       189 
       190 
      191 
      
       192 
       193 
       194 
      195 
      
       196 
       197 
       198 
       199 
       200 
       201 
       202 
       203 
       204 
       205 
      206 
      
       207 
       208 
       209 
       210 
       211 
       212 
       213 
       214 
       215 
       216 
       217 
       218 
      219 
      
       220 
       221 
       222 
       223 
       224 
       225 
       226 
       227 
       228 
       229 
      230 
      
       231 
       232 
       233 
      234 
     235 
     
      236 
      
       237 
       238 
      239 
      
       240 
       241 
       242 
       243 
       244 
       245 
       246 
       247 
       248 
      249 
      
       250 
       251 
       252 
       253 
       254 
      255 
      
       256 
       257 
        258 
       259 
       260 
       261 
       262 
      263 
      
       264 
       265 
       266 
      267 
     268 
     档案编号: 123456996
主车信息
车牌号： 鲁JK345 大架号： LA9940Zc506FDSS218 车辆类型： 重型货车
发动机型号： 鲁JK345 注册日期： 2016-06-26 厂牌型号 东风天龙
行驶证到期日期： 2016-05-30 运营证到期日期： 2016-08-30 车辆状态： 正常
挂靠详情： 挂靠费 150 审运营费 5000 委托费 3000 安全会议费 300 GPS费 600 其他 500 共计 60000
挂靠日期： 2016-09-30 收费日期 2016-06-30 挂靠备注 ********
主车备注： 鲁JK345
商险详情： 投保日期 2016-06-30至2016-09-30 金额 3000 保险公司 人保 代理人 张三丰
商险种类： 三者险 200 车损险 400 驾驶员险 500 乘客险 300 不计免赔险 500
强险详情： 投保日期： 2016-09-30至2015-06-30 金额 1300 保险公司 人保  代理人 上官飞燕
保险备注： 鲁JK345132132123123132
挂车信息
车牌号： 鲁JK345 大架号： LA9940Zc506FDSS218 车辆类型： 重型货车
发动机型号： 鲁JK345 注册日期： 2016-06-26 厂牌型号 东风天龙
行驶证到期日期： 2016-05-30 运营证到期日期： 2016-08-30 车辆状态： 正常
挂靠详情： 挂靠费 150 审运营费 5000 委托费 3000 安全会议费 300 GPS费 600 其他 500 共计 60000
挂靠日期： 2016-09-30 收费日期 2016-06-30 挂靠备注 ********
主车备注： 鲁JK345
商险详情： 投保日期 2016-06-30至2016-09-30 金额 3000 保险公司 人保 代理人 张三丰
商险种类： 三者险 200 车损险 400 驾驶员险 500 乘客险 300 不计免赔险 500
强险详情： 投保日期： 2016-09-30至2015-06-30 金额 1300 保险公司 人保  代理人 上官飞燕
保险备注： 鲁JK345132132123123132
车主信息
姓名： 张三丰 电话： 187****6129 备用电话 157****6629 区域 济南
身份证号码 6228211994........ 地址 山东省济南市历城区外滩南区12单元1801
驾驶员： 张三丰 驾驶证号： 370126198704250714 上岗证： 15694921333654
主车备注： 鲁JK345269 
   270 
  271 
  272 
  273 
  274 
  275 
  276 
  281 282

这里主要用了colspan,但是这个好像也不是太好，不知道大家是怎么去处理的。原生Bootstrap旋转木马特效原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。下载

相关文章