1.bootstrap做了一个表格

花了一下午做了一个表格：大致是这样：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>广发互联小贷</title>

<meta name="keywords" content="广发互联小贷" />

<meta name="description" content="广发互联小贷" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="#ffa74d">

<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<style>

	tr td {

		vertical-align: middle !important;

	}

	.warning td[rowspan]:first-child {

		background-color: #d9edf7;

	}

	.col-xs-full{

		padding: 0

	}

	.label-addition {

		font-size: 22px;

    	padding: 10px 0;

	}

</style>

<body>

	<div class="container-fluid">

		<div class ="row">

			<div class="col-md-12 label-primary text-center label-addition">

				<h1 class="label">零售系统运营数据-关键指标</h1>

			</div>

			<div class="col-xs-12 col-xs-full">

				<div class="table-responsible">

					<table class="table table-bordered" align="center">

						<thead>

							<tr class="info">

								<th colspan=2>零售系统-运营</th>

								<th>累计</th>

								<th>2016/8/14</th>

							</tr>

						</thead>

						<tbody>

							<tr>

								<td rowspan=3 class="info">注册</td>

								<td>关注微信公众号用户量</td>

								<td>1580</td>

								<td>23</td>

							</tr>

							<tr class="warning">

								<td>注册成功用户量</td>

								<td>735</td>

								<td>2</td>

							</tr>

							<tr>

								<td>注册转化率(注册成功/关注公众号)</td>

								<td>24.49%</td>

								<td>23.31%</td>

							</tr>

							<tr class="warning">

								<td rowspan=4>授信</td>

								<td>授信申请笔数</td>

								<td>387</td>

								<td>11</td>

							</tr>

							<tr>

								<td>授信通过笔数</td>

								<td>221</td>

								<td>7</td>

							</tr>

							<tr class="warning">

								<td>授信总额度(万元)</td>

								<td>11491</td>

								<td>326</td>

							</tr>

							<tr>

								<td>平均授信额度(万元)</td>

								<td>52.00</td>

								<td>46.00</td>

							</tr>

							<tr class="warning">

								<td rowspan=3>放款</td>

								<td>放款笔数</td>

								<td>183</td>

								<td>128</td>

							</tr>

							<tr>

								<td>放款总金额(万元)</td>

								<td>6921</td>

								<td>59</td>

							</tr>

							<tr class="warning">

								<td>笔均放款金额(万元)</td>

								<td>37.82</td>

								<td>14.75</td>

							</tr>

						</tbody>

					</table>

				</div>

			</div>

		</div>

	</div>

	<script src="js/deps/zepto.js"></script>

	<script type="js/deps/bootstrap.min.js"></script>

	<script src="js/statistics/genernal.js"></script>

</body>

</html>

以后遇到类似的表格就可以参考下了。

2.Font Awesome3.0 使用

很多图标都可以下载直接使用。非常方便

bootstrap做了一个表格的更多相关文章

  1. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  2. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  3. Flask---使用Bootstrap新建第一个demo

    Flask---使用Bootstrap新建第一个demo 参考自http://www.jianshu.com/p/417bcbad82fb 还有<Flask web开发> 前端用到Boot ...

  4. 如何将excel中的一个表格内容转成xml格式的文件

    转自:http://www.cnblogs.com/sansi/archive/2012/02/06/2340471.html 感谢作者,解决了折磨我几天的问题,顿时心情开朗~ ----------- ...

  5. 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/

    最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...

  6. 我做了一个 HTML 可视化编辑工具，有前途吗？

    疫情在家的这段时间,我做了一个 HTML 可视化编辑工具,做的时候信心满满,差不多完成了,现在反而不如以前信心足了,这玩意有用吗?代码地址: https://github.com/vularsoft/ ...

  7. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  8. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  9. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

随机推荐

  1. Mvc model验证总结

    Model 验证总结 Model 验证总结 1 一．Model 验证标记 1 1.启用客户端验证: 1 2.在 Model 中加入验证标记 2 3 . Model 类中可以添加的验证标记: 3 3.1 ...

  2. 优化临时表使用，SQL语句性能提升100倍

    [问题现象] 线上mysql数据库爆出一个慢查询,DBA观察发现,查询时服务器IO飙升,IO占用率达到100%, 执行时间长达7s左右.SQL语句如下:SELECT DISTINCT g.*, cp. ...

  3. 如何快速简单上传类库到CocoaPods - 图文攻略步骤

    当自己的库已经上传GitHub后,那么如何快速简单的开源自己的库呢? 这里就是介绍如何将自己的类库上传到pods管理库,以便开源所有人都能方便使用. 准备前提: - 项目已上传到GitHub (注意, ...

  4. Source Insight常用功能设置

    熟悉工具的使用能在一定程度上提高工作效率,但工具永远只是工具,大家要把重点放在内功的修炼上. 符号导航 符号(变量.宏定义.结构定义.枚举.函数等等)在SI 中的检索非常方便.Ctrl+鼠标左键或Ct ...

  5. 你不一定懂的cpu显示信息

    在linux命令中用top查看系统的情况,在cpu这一行有一些分部表示什么 下面有一篇博文,对此写的非常清楚,特转载.猛击下面的链接 http://www.cnblogs.com/yjf512/p/3 ...

  6. 解决Android Graphical Layout 界面效果不显示

    解决Android Graphical Layout 界面效果不显示 qq463431476

  7. Git安装与配置

    一.简介 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的 ...

  8. http 状态码含义

    HTTP状态码被分为五大类, 目前我们使用的HTTP协议版本是1.1, 支持以下的状态码.随着协议的发展,HTTP规范中会定义更多的状态码. 小技巧: 假如你看到一个状态码518, 你并不知道具体51 ...

  9. Linux Shell编程入门

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  10. [django]l利用xlrd实现xls文件导入数据

    代码: #coding:utf-8 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "www.sett ...