纯css打造美丽的html表格

花了点时间，自己做了个美丽的html表格，採用技术有css,html，其它的废话我也不多说了，直接上图。上代码。

界面图片：

HTML代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML>

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

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

</head>

<body>

<div class="table_div">

<div class="div_clear">

<div class="left_top"></div>

<div class="center_top">

<div style="float:left">

<img src="./tab/images/tb.gif" width="16px" height="16px" style="vertical-align:middle"/>

<span style="font-weight:bold">你当前的位置</span>：[业务中心]-[我的邮件]

</div>

<div style="float:right;padding-right:6px">

<img width='16' height='16' src="./tab/images/22.gif" style="vertical-align:middle"/>

<a href="#">新增</a> 

<img width='16' height='16' src="./tab/images/33.gif" style="vertical-align:middle"/>

<a href="#">改动</a> 

<img width='16' height='16' src="./tab/images/11.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</div>

</div>

<div class="right_top"></div>

</div>

<div class="div_clear">

<div class="left_center"></div>

<div class="center_center">

<div class="table_content">

<table cellspacing="0px" cellpadding="0px">

<thead >

<tr>

<th width="16%">wo</th>

<th width="16%">ffe</th>

<th width="16%">ff</th>

<th width="16%">ff</th>

<th width="16%">ff</th>

<th wdith="20%" style="border-right:none">操作</th>

</tr>

</thead>

<tbody>

<tr>

<td width="16%">ff</td>

<td width="16%">ff</td>

<td width="16%">f</td>

<td width="16%">fe</td>

<td width="16%">ew</td>

<td width="20%" style="border-right:none">

<img width='16' height='16' src="./tab/images/del.gif" style="vertical-align:middle"/>

<a href="#">改动</a> 

<img width='16' height='16' src="./tab/images/edt.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</td>

</tr>

<tr>

<td width="16%">ff</td>

<td width="16%">ff</td>

<td width="16%">f</td>

<td width="16%">fe</td>

<td width="16%">ew</td>

<td width="20%" style="border-right:none">

<img width='16' height='16' src="./tab/images/del.gif" style="vertical-align:middle"/>

<a href="#">改动</a> 

<img width='16' height='16' src="./tab/images/edt.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</td>

</tr>

<tr>

<td width="16%">ff</td>

<td width="16%">ff</td>

<td width="16%">f</td>

<td width="16%">fe</td>

<td width="16%">ew</td>

<td width="20%" style="border-right:none">

<img width='16' height='16' src="./tab/images/del.gif" style="vertical-align:middle"/>

<a href="#">改动</a> 

<img width='16' height='16' src="./tab/images/edt.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="right_center"></div>

</div>

<div class="div_clear">

<div class="left_bottom"></div>

<div class="center_bottom">

<span>  共同拥有 120 条记录，当前第 1/10 页</span>

<div style="float:right;padding-right:30px">

<input type="button" value="首页"/>

<input type="button" value="上页"/>

<input type="button" value="下页"/>

<input type="button" value="尾页"/>

<span>跳转到</span>

<input type="text" size="1"/>

<input type="button" value="跳转"/>

</div>

</div>

<div class="right_bottom"></div>

</div>

</div>

</body>

</html>

CSS文件代码：

/*******************************通用样式***********************/

body{

padding:0px;

margin:0px;

font-size:12px;

}

body a{

color:#03515d;

text-decoration:none;

}

body button{

color:#03515d;

}

body span{

color:#03515d;

}

.center_bottom input{

color:#03515d;

font-size:12px;

height:20px;

width:40px;

padding:2px;

vertical-align:middle;

text-align:center;

margin-bottom:6px;

}

/**************************布局部分********************/

.table_div{

width:1000px;

padding:10px;

margin:0 auto;

}

.div_clear{

clear:both;

}

.left_top{

background:url("./tab/images/tab_03.gif");

height:30px;

width:12px;

float:left;

}

.left_center{

background:url("./tab/images/tab_12.gif");

height:400px;

width:12px;

float:left;

}

.left_bottom{

background:url("./tab/images/tab_18.gif");

height:35px;

width:12px;

float:left;

}

.center_top{

background:url("./tab/images/tab_05.gif") repeat-x;

height:30px;

line-height:30px;

width:900px;

float:left;

}

.center_center{

height:400px;

width:900px;

float:left;

}

.center_bottom{

background:url("./tab/images/tab_19.gif") repeat-x;

height:35px;

width:900px;

float:left;

line-height:35px;

}

.right_top{

background:url("./tab/images/tab_07.gif");

height:30px;

width:15px;

float:left;

}

.right_center{

background:url("./tab/images/tab_15.gif");

height:400px;

width:15px;

float:left;

}

.right_bottom{

background:url("./tab/images/tab_20.gif");

height:35px;

width:15px;

float:left;

}

/**************************************表格内容***********************************/

.table_content{

margin:5px;

border:1px solid #B5D6E6;

width:890px;

height:390px;

overflow-x:hidden;

overflow-y:auto;

}

.table_content table{

width:100%;

border:0;

border-collapse:collapse;

font-size:12px;

}

.table_content table tr:hover{

background-color:#C1EBFF;

}

.table_content table th{

border-collapse:collapse;

height:22px;

background:url("./tab/images/bg.gif");

border-right:1px solid #B5D6E6;

border-bottom:1px solid #B5D6E6;

}

.table_content table td{

height:22px;

word-wrap:break-word;

max-width:200px;

text-align:center;

vertical-align:middle;

border-right:1px solid #B5D6E6;

border-bottom:1px solid #B5D6E6;

}

图片素材也给大家献上，几分钟就能够吧这个美丽的表格搞到手。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

纯css打造美丽的html表格的更多相关文章

【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一步骤二步骤三通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
纯CSS打造银色MacBook Air（完整版）
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
纯CSS打造BiliBili样式博客主题
前言一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
HTML5 CSS3专题纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
HTML5 CSS3专题纯CSS打造相册效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...
学用纯CSS打造可折叠树状菜单
随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...
纯 css 打造一个小提示 tooltip
最后编辑:2019/11/26 前无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果使用的特性 css2 中的 attr 函数,所以现在(2 ...

随机推荐

bat脚本禁用和开启本地连接
netsh interface set interface name="本地连接" admin=disabled //禁用本地连接 netsh interface set inte ...
Nginx 与Tomcat 实现动静态分离、负载均衡
Nginx 与Tomcat 实现动静态分离.负载均衡一．Nginx简介: Nginx一个高性能的HTTP和反向代理服务器, 具有很高的稳定性和支持热部署.模块扩展也很容易.当遇到访问的峰值,或者有人 ...
EL表达式学习笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6684424.html 一:EL表达式的用途 1.获取数据:(某个web域中的对象,访问javabean的 ...
Configuring the launch of the remote virtual machine to debug
Options need to be added to the standard launch of a virtual machine (VM) to enable the debugging ar ...
java 如何使用多线程调用类的静态方法？
1.情景展示静态方法内部实现:将指定内容生成图片格式的二维码: 如何通过多线程实现? 2.分析之所以采用多线程,是为了节省时间 3.解决方案准备工作 logo文件将生成的文件保存在F盘te ...
《Android源代码设计模式解析与实战》读书笔记（十）
第十章.解释器模式解释器模式是一种用的比較少的行为型模式.其提供了一种解释语言的语法或表达式的方式. 可是它的使用场景确实非常广泛,仅仅是由于我们自己非常少回去构造一个语言的文法,所以使用较少. 1 ...
SpringBoot bootstrap 配置文件没有生效
今天单独使用SpringBoot,发现其中的bootstrap.properties文件无法生效,改成yaml格式也无济于事. 最后调查发现原来是因为SpringBoot本身并不支持,需要和Sprin ...
转:修改ETM,用Ogre实现《天龙八部》地形与部分场景详解
本文主要讲的是<天龙八部>游戏的地形和一部分场景的具体实现,使用C++, Ogre1.6,我摸索了段时间,可能方法用的并不是最好的,但好歹实现了.文章可能讲得有点罗嗦,很多简单的东西都讲了 ...
Oracle常用方法
oracle常用函数整理时间转换 to_char to_date select to_char( sysdate, 'yyyy-mm') FROM dual; -- 2014-05 select t ...
JS中文转换(UTF-8),url传递中文乱码解决
来源于:http://blog.csdn.net/kuangfengbuyi/article/details/45557437 js合成url时,如果参数是中文,传到struts2中会乱码,解决办法如 ...

纯css打造美丽的html表格

纯css打造美丽的html表格的更多相关文章

随机推荐

热门专题