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. openstack api快速入门

    原文:http://my.oschina.net/guol/blog/105430 openstack官方有提供api供开发者使用,可以使用api做一些外围的小工具,用来简化对openstack的管理 ...

  2. ECharts 初体验

    缘起 ECharts,缩写来自Enterprise Charts,商业级数据图表,它最初是为了满足公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表需求.以前这些系统的图表需求我们都是使用fla ...

  3. POJ1151Atlantis 矩形面积并[线段树 离散化 扫描线]

    Atlantis Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21734   Accepted: 8179 Descrip ...

  4. IntelliJ IDEA设置JVM运行参数

    2015十一月 28 原 IntelliJ IDEA设置JVM运行参数 分类:JavaSE (11566) (1) 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions ...

  5. Java8并发教程：Threads和Executors

    来之:ImportNew 欢迎阅读我的Java8并发教程的第一部分.这份指南将会以简单易懂的代码示例来教给你如何在Java8中进行并发编程.这是一系列教程中的第一部分.在接下来的15分钟,你将会学会如 ...

  6. TFS 掩蔽或取消掩蔽工作区中的文件夹

    掩蔽或取消掩蔽工作区中的文件夹 使用掩蔽功能可以阻止用户查看指定的工作区文件夹或者您当前不需要的文件夹.当您在对一个公共父级下的两个或更多个分支中的文件进行操作时,就可以使用掩蔽功能来避免复制不必要的 ...

  7. SecureCRT连接虚拟机（ubuntu）配置

    使用SecureCRT连接虚拟机(ubuntu)配置记录   这种配置方法,可以非常方便的操作虚拟机里的Linux系统,且让VMware在后台运行,因为有时候我直接在虚拟机里操作会稍微卡顿,或者切换速 ...

  8. Win10升级后回退后无法检测新版本的修复办法

    笔记本原来装的是Win10 10240版本,升级到14393版本后进行了回退.回退后,Win10系统再也检测不到新版本更新了.   解决办法如下: 1.打开注册表:HKEY_LOCAL_MACHINE ...

  9. IT行业的技术类岗位分为许多种，如何判断自己适合哪种？

    A.硬件工程师B.软件工程师C.UI设计师D.仿真工程师E.ERP工程师F.集成工程师G.系统架构设计师H.数据库工程师I.网络管理员J.网络安全工程师K.网站架构设计师L.网页设计M.Flash设计 ...

  10. .NET跨平台之旅：将示例站点从ASP.NET 5 Beta7升级至RC1

    今天,我们将示例站点(about.cnblogs.com,服务器操作系统是Ubuntu)从ASP.NET 5 Beta7升级到了RC1,在升级过程中只遇到了一个问题. 在运行 dnvm upgrade ...