表格布局----基于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 ...
随机推荐
- mybatis No enum const class org.apache.ibatis.type.JdbcType.Integer
mybatis报错:没有Integer这个类型的jdbcType值 原因:mybatis配置重的jdbaType类型要是大写的 如图所示:
- AndroidStudio3更改包名失败
使用Android Studio 3.0 Beta6更改包名refactor---rename一直提示:Refactoring cannot be performedFile xxx\build\xx ...
- JVM基础篇(一)
JVM简介 JVM(Java虚拟机)是一个虚拟的机器,在实际的计算机上通过软件模拟来实现.JVM有自己的硬件,如处理器.堆栈.寄存器等,还具有相应的指令系统. JVM包括一套字节码指令集.一组寄存器. ...
- HDU 4349 Xiao Ming's Hope [Lucas定理 二进制]
这种题面真是够了......@小明 题意:the number of odd numbers of C(n,0),C(n,1),C(n,2)...C(n,n). 奇数...就是mod 2=1啊 用Lu ...
- Asp.Net Core 2.0 之旅---在Ubuntu上部署WEB应用程序
1.Ubuntu 上 安装NET Core 2.0 SDK 第一步的安装,微软大佬已经写的非常详细了=>直达链接,按照教程来即可. 2.将我们的WEB 发布到一个文件夹,将这个文件夹打包成 压缩 ...
- pyDash：一个基于 web 的 Linux 性能监测工具
pyDash 是一个轻量且基于 web 的 Linux 性能监测工具,它是用 Python 和 Django 加上 Chart.js 来写的.经测试,在下面这些主流 Linux 发行版上可运行:Cen ...
- docker 实践(一)
docker 简介 容器虚拟化,比传统的虚拟化轻量 2013年出现,发展非常迅猛 Redhat在6.5版本开始支持docker 使用go语言开发,基于apache2.0协议 开源软件,项目代码在git ...
- [转载]LVS+Keepalived之三大模式
LVS + Keepalived之三大模式 ============================================================================== ...
- [记录]MySQL读写分离（Atlas和MySQL-proxy）
MySQL读写分离(Atlas和MySQL-proxy) 一.阿里云使用Atlas从外网访问MySQL(RDS) (同样的方式修改配置文件可以实现代理也可以实现读写分离,具体看使用场景) 1.在跳板机 ...
- Oracle创建表时Storage参数具体含义
本文通过图表和实例的阐述在Oracle数据库创建新表时Storage的参数具体含义. 可用于:表空间.回滚段.表.索引.分区.快照.快照日志 参数名称 缺省值 最小值 最大值 说明 INITIAL 5 ...