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. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  2. 在cmd和terminal怎么粘贴？

    在osx, linux的terminal 以及windows的 cmd实现粘贴是coder经常要做的事,鼠标右键,下拉菜单中单击粘贴paste.但是这显得笨拙,及其不快捷.但是正常使用的command ...

  3. sshfs 实现普通用户可读写

    先实现普通用户免密码host1可登入host2host1# yum install fuse sshfs; 如果装不上,需要安装epep源 --enablerepo=epelhost1# su - e ...

  4. iOS 10 的坑：新机首次安装 app，请求网络权限“是否允许使用数据”(转)

    症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...

  5. AP是什么

    百度链接: AP---http://baike.baidu.com/link?url=_mC-Wkgl8j1_awpuicoZk3i4MWVcLaio1nm9XRt60F9QD4V_lJ-kE7J4C ...

  6. [嵌入式开发]Linux性能分析——上下文切换

    一.从一个问题说起 相信很多人在玩手机还是PC时,都曾碰到过这样一种情况,安装的软件多了系统性能就变慢了,但是去查看CPU利用率一直都低于10%,内存也很充足.我在近期的开发工作中就碰到了类似的情况, ...

  7. ASP.NET 5 DNX SDK删除旧版本

    ASP.NET 5各种升级后旧版本的DNX不会删除,想删除旧版本的DNX,可以通过以下命令完成 首先打开CMD或者Powershell 1.先输入dnvm看看命令中是否有uninstall 2.如果没 ...

  8. FeWeb基础之JavaScript简介

    FeWeb基础之JavaScript简介 1.JavaScript的基本介绍 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,它是通过嵌入或调入在标准的HTML语言中实现的.Ja ...

  9. sublime 安装笔记

    sublime 安装笔记 下载地址 安装package control 根据版本复制相应的代码到console,运行 按要求重启几次后再按crtl+shift+p打开命令窗口 输入pcip即可开始安装 ...

  10. POJ1273Drainage Ditches[最大流]

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 71559   Accepted: 2784 ...