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

巴扎黑

发布时间：2017-06-27 09:27:27

1712人浏览过

来源于php中文网

原创

在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处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,但是这个好像也不是太好，不知道大家是怎么去处理的。

css3健身锻炼计划表格ui布局样式代码

一款css3健身锻炼计划表格ui布局样式代码

下载

Bootstrap Carousel 不滑动？常见原因与完整解决方案

Bootstrap 5 实现双图并列 + 中央悬浮元素的响应式三栏布局

如何在 Bootstrap 5 中实现模态框（Modal）垂直居中显示

如何为 Bootstrap 卡片组中的每个卡片设置独立的 CSS 旋转角度

如何为 Bootstrap 5 浮动标签表单添加 Tooltip 提示

相关专题

Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容，阅读专题下面的文章了解更多详细内容。

132

2026.02.06

java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南，帮助用户快速找到官方网站入口，了解如何进行批发采购、货源选择以及厂家直销等功能，提升采购效率与平台使用体验。

748

2026.02.06

快手网页版入口与电脑端使用指南快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法，详细提供快手官网直接访问链接、网页端操作教程，以及如何无需下载安装直接观看短视频的方式，帮助用户轻松浏览和观看快手短视频内容。

442

2026.02.06

C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧，包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目，帮助开发者掌握如何在 C# 中构建高并发、低延迟的异步系统，提升应用性能和响应速度。

2026.02.06

Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用，涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例，帮助学习者掌握使用 FastAPI 构建高效、可扩展的微服务应用，提高服务响应速度与系统可维护性。

2026.02.06