经常使用的两个清爽的table样式
两个我经常使用的table样式：
<html>
<head>
<title></title>
<style type="text/css">
body,table{
font-size:12px;
}
table{
table-layout:fixed;
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}
td{
height:30px;
}
h1,h2,h3{
font-size:12px;
margin:0;
padding:0;
}
.table{
border:1px solid #cad9ea;
color:#666;
}
.table th {
background-repeat:repeat-x;
height:30px;
}
.table td,.table th{
border:1px solid #cad9ea;
padding:0 1em 0;
}
.table tr.alter{
background-color:#f5fafe;
}
</style>
</head>
<body>
<table width="90%" class="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>平时</th>
<th>期中</th>
<th>实验（践）</th>
<th>其它</th>
<th>期末</th>
<th>总评</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="alter">
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
----------------------------------------
<html>
<head>
<title></title>
<style type="text/css">
.table
{
width: 100%;
padding: 0;
margin: 0;
}
th {
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:14px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec,td.spec {
border-left: 1px solid #C1DAD7;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:14px;}
tr.select th,tr.select td
{
background-color:#CAE8EA;
color: #797268;
}
</style>
</head>
<body>
<table class="table" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<tr>
<th class="spec">选择</th>
<th>课程名称</th>
<th>课程编号</th>
<th>已经考试次数</th>
</tr>
<tr>
<td class="spec">1</td>
<td>1</td>
<td class="alt">1</td>
<td>1</td>
</tr>
<tr class="select">
<td class="spec">2</td>
<td>2</td>
<td class="alt">2</td>
<td>2</td>
</tr>
<tr>
<td class="spec">3</td>
<td>3</td>
<td class="alt">3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
经常使用的两个清爽的table样式的更多相关文章
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- 【CSS】Table样式
一.table td的宽度详解 Table只有Table的宽度是可以设置的,并且各个浏览器理解一致 原则上应该将table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值 Table的宽度 ...
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- table完美css样式，table的基本样式，table样式
table完美css样式,table的基本样式,table样式 >>>>>>>>>>>>>>>>> ...
- 通用table样式
<html> <head> <title>通用table样式</title> <style type="text/css"&g ...
- Table样式设置
<table class="listTable"> <tr><th width="40px">序号</th>&l ...
- css table样式
1.table样式首先设置表格边框,属性设置表格的边框是否被合并为一个单一的边框. table{ border-collapse: collapse; border-spacing: 0;} 2.固定 ...
- html 简单的table样式
效果预览: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 好看的table样式
收藏个好看的table样式 <style type="text/css">table.gridtable { font-family: verdana,arial,sa ...
随机推荐
- html表格cell合并插件
数据展示时需要合并部分数据自己写了一个简单插件 合并前: 合并后: 调用示例: var trs = $('table#dataList tbody tr').not('#demo').get(); v ...
- centos6.5 无线网卡配置
来自:http://liqirui.blog.51cto.com/4662702/1344877 http://wiki.centos.org/zh/HowTos/Laptops/Wp ...
- 字符串匹配的KMP算法(转)
转载:http://kb.cnblogs.com/page/176818/ 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE&quo ...
- [YZOJ1579]&&[BZOJ2450]arr
Description 给出3*n个数xi,要求构造三个长度为n的序列ai,bi,ci,使得满足下列条件: 1到3*n的每个数都在三个序列中的某个出现一次且仅一次: S=sum((x[ai]-x[bi ...
- WordPress Woopra plugin remote PHP arbitrary code execution exploit.
测试方法: 提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! # Exploit Title: woopra plugins execute arbitrary PHP code E ...
- 【转】Fragment和Activity
原文网址:http://www.cnblogs.com/mengdd/archive/2013/01/11/2856374.html Fragment和Activity的交互 一个Fragment的实 ...
- Android 侧边栏(使用Support Library 4提供的扩展组件)
本文转自:http://www.apkbus.com/android-117148-1-1.html 写在前面的话:接触Android已经有一段时间了,自己积累的东西也算蛮多的.总结以往的经验,凡是关 ...
- 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献
转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...
- yum puppet
config.gem: Unpacked gem factory_girl-1.3.3 in vendor/gems has no specification file. Run 'rake gems ...
- Uniform resource name
A uniform resource identifier (URI) is a uniform resource locator(定位器,探测器) (URL), uniform resour ...