表格布局----基于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 ...
随机推荐
- 什么是SSL
什么是SSL 简单来说,在我们使用的浏览器中都默认信任着全世界多个最权威的CA机构(证书颁发机构),如下图: 上图中,受信任的根证书颁发机构列表里的都是我们浏览器中默认信任的CA机构,我们只需要向他们 ...
- CentOS7安装MySQL的方法之RPM包方式
CentOS7安装MySQL的方法之RPM包方式
- Lucene 5.X 版本索引文件格式
原文链接:https://my.oschina.net/rickylau/blog/527602 名称 文件拓展名 描述 段文件 segments_N 保存了索引包含的多少段,每个段包含多少文档. 段 ...
- BZOJ 3028: 食物 [生成函数 隔板法 | 广义二项式定理]
3028: 食物 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 497 Solved: 331[Submit][Status][Discuss] De ...
- centos java环境搭建
我个人配置的是阿里云centos 7.4 64bit 不存在openjdk 看下面内容的情况下看是否存在openjdk java -version 如果返回java版本值,则存在openjdk,需要卸 ...
- qt中的多线程
1.dialog.h #define DIALOG_H #include <QDialog>#include"mythread.h"namespace Ui {clas ...
- Java中excel与对象的互相转换的通用工具类编写与使用（基于apache-poi-ooxml）
通用excel与对象相互转换的工具类 前言:最近开发需要一个Excel批量导入或者导出的功能,之前用过poi-ooxml开发过一个导入的工具类,正好蹭着这次机会,把工具类的功能进行完善. 使用说明: ...
- VirtualDOM与diff(Vue实现)
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- java程序员理解js中的闭包
1.闭包概念: 就是函数内部通过某种方式访问一个函数内部的局部变量 再次理解: 闭包产生原因: 1.内部函数引用了外部函数的变量 作用:延长局部变量的生命周期 让函数外部可以调用到函数内部的数据 利用 ...
- 在centos 6.8下安装docker
1.检查自己的系统内核是不是64位系统,因为docker只能安装在64位系统中 命令: uname -a 结果 2.6.32-642.6.2.el6.x86_64 2.查看自己centos的版本 ca ...