表格布局----基于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 ...
随机推荐
- SpringMVC源码情操陶冶-InterceptorsBeanDefinitionParser拦截器解析器
解析mvc:interceptors节点 观察下InterceptorsBeanDefinitionParser的源码备注 /** * {@link org.springframework.beans ...
- appium+python环境搭建
一.环境 1.安装python. 2.安装appium. 3.安装pip 4.安装selenium 5.安装Appium-Python-Client #cmd->cd setupto ...
- CF 741D. Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths [dsu on tree 类似点分治]
D. Arpa's letter-marked tree and Mehrdad's Dokhtar-kosh paths CF741D 题意: 一棵有根树,边上有字母a~v,求每个子树中最长的边,满 ...
- 如何在方法上贴上attribute(特性)捕捉方法的异常，来实现我们的需求
在方法上贴上attribute(特性)捕捉方法的异常,其实这么做也是为了在项目中不会大量使用try-cacth这样的语句,同时使我们的代码看起来更简洁,更直观,将逻辑业务分离使得后期维护方便.这里我们 ...
- 使用websocket实现在线聊天功能
很早以前为了快速达到效果,使用轮询实现了在线聊天功能,后来无意接触了socket,关于socket我的理解是进程间通信,首先要有服务器跟客户端,服务的启动监听某ip端口定位该进程,客户端开启socke ...
- Navicat的使用
Navicat的使用 navicat作为一种数据库的操作工具,在工作中使用的频率很高.相比phpMyAdmin而言,无论是从界面操作的易用性上,还是外观上,抑或是IP的配置上都有着很大的突出优势.ph ...
- php 下载保存文件保存到本地的两种实现方法
这里的下载,指的是 弹出下载提示框. 第一种: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php function downfile() { $filename ...
- web自动化一（selenium+python+pycharm环境搭建）
年前公司刚刚搭起了web自动化测试框架的环境,趁着过完年还没全部忘掉,准备把如何搭建环境的方法和大家分享下,有哪里不对的地方,请批评指正,共同进步,共勉! 为此我把搭建环境所需的软件打包上传到百度云, ...
- 用yii2给app写接口（下）
上一节里我们讲了如何用Yii2搭建一个能够给App提供数据的API后台应用程序.那么今天我们就来探讨下授权认证和通过API接口向服务器提交数据以及如何控制API接口返回那些数据,不能返回那些数据. 授 ...
- js中判断数组中是否含有某个字符串方法
1．两个数组间互相校验 Var inArray = function(arr, item) { for(var i = 0; i < arr.length; i++) { if(arr[i] ...