表格布局----基于bootstrap样式 布局
在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处Excel的样式，感觉非常糟糕，这次我就写了一个表单，不足之处，希望大神们多多指教；
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>查询详情</title>
<meta name="keywords" content=""/>
<meta name="description" content="">
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<style>
#cardetail{
color:#fff;
font-size:16px;
}
.table-header{
height: 66px;
font-size: 22px;
background:rgba(224,226,230,.8);
}
.table-user{
height: 60px;
font-size: 20px;
} .table-list{
height:35px;
}
</style>
</head>
<body class="body-white">
<!-- 车辆详情部分表格 -->
<div class="wrapper">
<div class="table-responsive">
<table id="cardetail" class="table table-bordered">
<tbody>
<tr class="table-header">
<td width="130"><i class="fa fa-pencil"></i> 档案编号: </td>
<td colspan="24" id="number" name="user[number]">123456996</td>
</tr>
</tbody>
<tbody id="car">
<tr class="table-user">
<td colspan="26">主车信息</td>
</tr>
<tr class="table-list">
<td>车牌号：</td>
<td id="hcardNum">鲁JK345</td>
<td>大架号：</td>
<td id="hcard" colspan="4">LA9940Zc506FDSS218</td>
<td colspan="2">车辆类型：</td>
<td id="hcardType" colspan="12">重型货车</td>
</tr>
<tr class="table-list">
<td>发动机型号：</td>
<td id="hcardNum">鲁JK345</td>
<td class="tableName" >注册日期：</td>
<td id="hcard" colspan="4">2016-06-26</td>
<td class="tableName" colspan="2">厂牌型号</td>
<td id="hcardType" colspan="12">东风天龙</td>
</tr>
<tr class="table-list">
<td class="tableName">行驶证到期日期：</td>
<td id="hcardNum" colspan="2">2016-05-30</td>
<td class="tableName" >运营证到期日期：</td>
<td id="hcard" colspan="4">2016-08-30</td>
<td class="tableName" colspan="2">车辆状态：</td>
<td id="hcardType" colspan="12">正常</td>
</tr>
<tr class="table-list">
<td>挂靠详情：</td>
<td id="hcardNum">挂靠费</td>
<td>150</td>
<td id="hcard">审运营费</td>
<td>5000</td>
<td>委托费</td>
<td>3000</td>
<td>安全会议费</td>
<td>300</td>
<td>GPS费</td>
<td>600</td>
<td>其他</td>
<td>500</td>
<td>共计</td>
<td>60000</td>
</tr>
<tr class="table-list">
<td class="tableName">挂靠日期：</td>
<td id="hcardNum">2016-09-30</td>
<td class="tableName">收费日期</td>
<td id="hcard" colspan="3">2016-06-30</td>
<td class="tableName" colspan="2">挂靠备注</td>
<td id="hcardType" colspan="7">********</td>
</tr>
<tr class="table-list">
<td class="tableName">主车备注：</td>
<td id="hcardNum" colspan="26">鲁JK345</td>
</tr>
<tr class="table-list">
<td class="tableName">商险详情：</td>
<td id="hcardNum">投保日期</td>
<td class="tableName" colspan="2">2016-06-30至2016-09-30</td>
<td id="hcard" colspan="1">金额</td>
<td class="tableName" colspan="1">3000</td>
<td id="hcardType" colspan="1">保险公司</td>
<td id="hcardType" colspan="2">人保</td>
<td id="hcardType" colspan="2">代理人</td>
<td id="hcardType" colspan="6">张三丰</td>
</tr>
<tr class="table-list">
<td class="tableName">商险种类：</td>
<td id="hcardNum">三者险 </td>
<td>200</td>
<td id="hcard" >车损险 </td>
<td colspan="2">400</td>
<td id="hcardType">驾驶员险 </td>
<td id="hcardType" colspan="2">500</td>
<td id="hcardType">乘客险 </td>
<td id="hcardType" colspan="3">300</td>
<td id="hcardType">不计免赔险 </td>
<td id="hcardType" colspan="4">500</td>
</tr>
<tr class="table-list">
<td class="tableName">强险详情：</td>
<td id="hcardNum">投保日期：</td>
<td class="tableName" colspan="2">2016-09-30至2015-06-30</td>
<td id="hcard">金额</td>
<td class="tableName" colspan="1">1300</td>
<td id="hcardType" colspan="1">保险公司</td>
<td id="hcardType" colspan="2">人保</td>
<td id="hcardType" colspan="2"> 代理人</td>
<td id="hcardType" colspan="6">上官飞燕</td>
</tr>
<tr class="table-list">
<td class="tableName">保险备注：</td>
<td id="hcardNum" colspan="24">鲁JK345132132123123132</td>
</tr>
</tbody>
<tbody id="guacar">
<tr class="table-user">
<td colspan="26">挂车信息</td>
</tr>
<tr class="table-list">
<td>车牌号：</td>
<td id="hcardNum">鲁JK345</td>
<td>大架号：</td>
<td id="hcard" colspan="4">LA9940Zc506FDSS218</td>
<td colspan="2">车辆类型：</td>
<td id="hcardType" colspan="12">重型货车</td>
</tr>
<tr class="table-list">
<td>发动机型号：</td>
<td id="hcardNum">鲁JK345</td>
<td class="tableName" colspan="2">注册日期：</td>
<td id="hcard" colspan="3">2016-06-26</td>
<td class="tableName" colspan="2">厂牌型号</td>
<td id="hcardType" colspan="12">东风天龙</td>
</tr>
<tr class="table-list">
<td class="tableName" colspan="2">行驶证到期日期：</td>
<td id="hcardNum" colspan="2">2016-05-30</td>
<td class="tableName" colspan="3">运营证到期日期：</td>
<td id="hcard" colspan="3">2016-08-30</td>
<td class="tableName" colspan="2">车辆状态：</td>
<td id="hcardType" colspan="8">正常</td>
</tr>
<tr class="table-list">
<td>挂靠详情：</td>
<td id="hcardNum">挂靠费</td>
<td>150</td>
<td id="hcard">审运营费</td>
<td>5000</td>
<td>委托费</td>
<td>3000</td>
<td>安全会议费</td>
<td>300</td>
<td>GPS费</td>
<td>600</td>
<td>其他</td>
<td>500</td>
<td>共计</td>
<td>60000</td>
</tr>
<tr class="table-list">
<td class="tableName">挂靠日期：</td>
<td id="hcardNum" colspan="3">2016-09-30</td>
<td class="tableName" colspan="2">收费日期</td>
<td id="hcard" colspan="3">2016-06-30</td>
<td class="tableName" colspan="2">挂靠备注</td>
<td id="hcardType" colspan="6">********</td>
</tr>
<tr class="table-list">
<td class="tableName">主车备注：</td>
<td id="hcardNum" colspan="26">鲁JK345</td>
</tr>
<tr class="table-list">
<td class="tableName">商险详情：</td>
<td id="hcardNum">投保日期</td>
<td class="tableName" colspan="2">2016-06-30至2016-09-30</td>
<td id="hcard" colspan="1">金额</td>
<td class="tableName" colspan="1">3000</td>
<td id="hcardType" colspan="1">保险公司</td>
<td id="hcardType" colspan="2">人保</td>
<td id="hcardType" colspan="2">代理人</td>
<td id="hcardType" colspan="6">张三丰</td>
</tr>
<tr class="table-list">
<td class="tableName">商险种类：</td>
<td id="hcardNum">三者险 </td>
<td>200</td>
<td id="hcard" >车损险 </td>
<td colspan="2">400</td>
<td id="hcardType" colspan="2">驾驶员险 </td>
<td id="hcardType" colspan="2">500</td>
<td id="hcardType" colspan="2">乘客险 </td>
<td id="hcardType" >300</td>
<td id="hcardType">不计免赔险 </td>
<td id="hcardType" colspan="4">500</td>
</tr>
<tr class="table-list">
<td class="tableName">强险详情：</td>
<td id="hcardNum">投保日期：</td>
<td class="tableName" colspan="2">2016-09-30至2015-06-30</td>
<td id="hcard">金额</td>
<td class="tableName" colspan="1">1300</td>
<td id="hcardType" colspan="1">保险公司</td>
<td id="hcardType" colspan="2">人保</td>
<td id="hcardType" colspan="2"> 代理人</td>
<td id="hcardType" colspan="6">上官飞燕</td>
</tr>
<tr class="table-list">
<td class="tableName">保险备注：</td>
<td id="hcardNum" colspan="24">鲁JK345132132123123132</td>
</tr>
</tbody>
<tbody id="car">
<tr class="table-user">
<td colspan="26">车主信息</td>
</tr>
<tr class="table-list">
<td>姓名：</td>
<td id="hcardNum">张三丰</td>
<td>电话：</td>
<td id="hcard" colspan="2">187****6129</td>
<td colspan="2">备用电话</td>
<td id="hcardType" colspan="3">157****6629</td>
<td colspan="3">区域</td>
<td id="hcardType" colspan="3">济南</td>
</tr>
<tr class="table-list">
<td class="tableName">身份证号码</td>
<td id="hcardNum" colspan="3">6228211994........</td>
<td colspan="2">地址</td>
<td id="hcard" colspan="10">山东省济南市历城区外滩南区12单元1801</td>
</tr>
<tr class="table-list">
<td>驾驶员：</td>
<td id="hcardNum" colspan="2">张三丰</td>
<td colspan="2">驾驶证号：</td>
<td id="hcard" colspan="5">370126198704250714</td>
<td colspan="2">上岗证：</td>
<td colspan="5">15694921333654</td>
</tr>
<tr class="table-list">
<td class="tableName">主车备注：</td>
<td id="hcardNum" colspan="26">鲁JK345</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script src="js/xlsx.core.min.js"></script>
<script src="js/blob.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/tableexport.js"></script>
<script>
$(function(){
$("table").tableExport({formats:["xlsx","xls","csv","txt"]});
})
</script>
</body>
</html>
这里主要用了colspan,但是这个好像也不是太好，不知道大家是怎么去处理的。
表格布局----基于bootstrap样式 布局的更多相关文章
- 基于bootstrap样式的tree，
<!doctype html><html lang="zh"><head> <meta charset="UTF-8" ...
- 基于Bootstrap样式的 jQuery UI 控件 (v0.5).
网址:http://www.shouce.ren/example/show/s/6444#download-bootstrap
- css013 构建基于浮动的布局
css013 构建基于浮动的布局 基于浮动的布局时利用float属性是网页上的元素并排,并创建列 float有三个值:left .right .none 1.假设要把一张图片浮动到网页的左侧 .flo ...
- 一个基于Bootstrap实现的HMTL可视化编辑工具
疫情禁足在家,用原生的JS实现了一个HTML可视化编辑工具,页面布局基于Bootstrap.大约一个月时间,打通主要技术关卡,实现了第一版: 可以拖放编辑,实现了几乎所有的bootstrap预定义 ...
- 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面
在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 实现 Bootstrap 基本布局
看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML ...
随机推荐
- 济南清北学堂游记 Day 3.
为什么你们都说下午题简单?我反而觉得下午题难...因为上午暴力很好写啊... 第一题惊了是一道博弈论,冷静推理一大波推出了正解,就变成了结论题. 可是结论题不都是水题吗? T2是一道关于异或的题,照例 ...
- BZOJ 3895: 取石子[SG函数 搜索]
有N堆石子 ·从某堆石子中取走一个 ·合并任意两堆石子 不能操作的人输. 100%的数据满足T<=100, N<=50. ai<=1000 容易发现基础操作数$d=\sum a ...
- BZOJ 4566: [Haoi2016]找相同字符 [后缀自动机]
4566: [Haoi2016]找相同字符 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 275 Solved: 155[Submit][Statu ...
- BZOJ 2754: [SCOI2012]喵星球上的点名 [AC自动机+map+暴力]
2754: [SCOI2012]喵星球上的点名 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1902 Solved: 837[Submit][St ...
- Jquery里面种的 JSON.parse() 与JSON.stringify() 的区别
JSON.parse()与JSON.stringify()的区别 JSON.parse()[从一个字符串中解析出json对象] Demo: //定义一个字符串 var data='{"N ...
- ------ 新春第一炮：阶乘算法性能分析与 double fault 蓝屏故障排查 Part I ------
-------------------------------------------------------------------------- 春节期间闲来无事想研究下算法,上机测试代码却遇到了 ...
- asp.net Global.asax 不运行解决
asp.net application的站点发布后 Global.asax 未运行,搞了好久终于解决, 解决方法如下: publish设置 该设置经测试在win server 2003 和2008 都 ...
- java json字符串 获取value
java中可以导入有关json的jar包,但是此jar包又得依赖其他的jar包 ,所以需要导入的包如下: 可在这里下载相关jar包,CSDN下载啥都要钱 讨厌死了 还是这个链接好---云盘 htt ...
- shell实现go环境的部署搭建
##############################Deploy go enviroment######################## echo "start deploy g ...
- 织梦调用seotitle
如果有seotitle则调用seotitle,没有则调用title {dede:field.array runphp='yes'} if(@me['seotitle']=='') {@me=@me[' ...