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. 【静默安装】configToolAllCommands响应文件问题

    [静默安装]configToolAllCommands响应文件问题 客户在静默安装RAC 12.1.0.2的时候有如下的输出: Successfully Setup Software. As inst ...

  2. Java Keytools 证书转换成Openssl 的PEM 文件或keytools 导出私钥文件

    上一遍又说到Godaddy 生请证书流程与操作: 现因使用Incapsula 防护使用到https,在添加网站时需要自定义证书,其中需要上传私钥信息,因公钥是能过keytool 生成所以需要导出私钥信 ...

  3. Maven设置代理服务器

    在setting.xml中设置以下信息即可,请修正对应信息 <proxies> <proxy> <id>optional</id> <active ...

  4. JavaScript函数的概念

    函数是这样的一段代码,它只定义一次,但可能被执行或调用任意多次. JavaScript函数是参数化的:函数的定义会包含形参,这些参数在函数的整体中像局部变量一样工作.函数调用时会为形参提供实参的值.除 ...

  5. HTML总结

    几个知识点: HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML框架结构: <!DOCTYPE html> <html> < ...

  6. 网格弹簧质点系统模拟（Spring-Mass System by Fast Method）附源码

    弹簧质点模型的求解方法包括显式欧拉积分和隐式欧拉积分等方法,其中显式欧拉积分求解快速,但积分步长小,两个可视帧之间需要多次积分,而隐式欧拉积分则需要求解线性方程组,但其稳定性好,能够取较大的积分步长. ...

  7. [zz]如何在C语言程序中处理汉字

    学习过C语言的人也许有时会遇到这样一个问题:如何用变量存储汉字以及对这些变量进行操作.目前许多C语言参考书中都没涉及到这个问题,程序中多为处理英文变量和英文字符串,涉及到汉字的情况也大都是在print ...

  8. 简单服务接口访问时权限以及缓存HashMap实现

    实现拦截器: package com.zqc.share.framework.interceptor; import javax.annotation.Resource; import javax.s ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.1 版本 - 面向数据库SQL语句的应用开发二

    很多传统企业.包括系统集成类的IT企业,若不是从事专业软件开发领域的,能做出一套适合本公司企业信息化的灵活的信息系统还是很有难度的,还有一些已经多年不写程序的资深开发人员,初学者,都难把一个整套系统实 ...

  10. css 隔行变色，表单布局

    隔行变色: #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行  #list1 li:nth-of-type(even){ background:# ...