表格布局----基于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 ...
随机推荐
- iOS-Runtime的那些事...编辑中....
Runtime-iOS的黑魔法,还是很好玩的,消息机制.方法替换简单记录了一点,持续更新.... 1.方法替换 在类load方法中,替换系统方法 + (void)load{ Method oldCol ...
- verilog实验2：基于FPGA的59秒计时器设计
一.实验任务 利用四个数码管显示59秒计时器. 二.代码实现 将开发板的48M晶振分频出1M,然后计数器累加,将计数器结果显示在数码管上.低位逢十进一,第二位逢五进一,依次构成59秒计时器. 部分代码 ...
- 洛谷 [P2756] 飞行员配对方案问题
二分图匹配裸题 可以用匈牙利做,简单高效 输出具体的匹配路径时 ,直接输出match数组即可 #include <iostream> #include <cstdio> #in ...
- 洛谷 P3711 仓鼠的数学题 [伯努利数 fft]
P3711 仓鼠的数学题 题意: \[ S_m(x) = \sum_{k=0}^x k^m, 0^0=1\quad 求 \sum_{m=0}^n S_m(x)a_m \] 的答案多项式\(\sum_{ ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
- 使用TransactionScope（轻量级事务）实现数据库操作事务
TransactionScope是.Net Framework 2.0滞后,新增了一个名称空间.它的用途是为数据库访问提供了一个"轻量级"[区别于:SqlTransaction]的 ...
- 安卓中圆角背景图被拉伸的解决方案——.9.png
举个例子: 从网上找了一张图片 如果我们直接用这张蓝色的图来做登录按钮的背景.将这个图片设为背景以后 我们可以发现四个角全部变形了,一点也不美观.针对此问题,我们通过.9图来解决. 首先我们先了解一下 ...
- Java实现邮箱验证
Java实现邮箱验证 JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.我们可以基于JavaMail开 ...
- ucore文件系统详解
最近一直在mooc上学习清华大学的操作系统课程,也算是复习下基本概念和原理,为接下来的找工作做准备. 每次深入底层源码都让我深感操作系统实现的琐碎,即使像ucore这样简单的kernel也让我烦躁不已 ...
- 利用mock提高效率
利用mock提高效率 谈到mock,就不得不讲前后端分离.理想情况下前后端不分离,由全栈的人以product和infrastructure的维度进行开发,效率是最高的.近些年来业务的复杂度越来越高,真 ...