变化多端 – 多种纯CSS的HTML表格设计
原文地址为： 变化多端 – 多种纯CSS的HTML表格设计
介绍
在HTML中，Table节点由于其层层嵌套的节点结构，一度名声很臭，且一度被呼吁用DIV+CSS取而代之。但在实际项目开发中，一碰到规整的数据显示，不知不觉又会用起它。可见其生命力之顽强。
这儿就探讨下几种不同的通过CSS实现的Table设计 。通过JavaScript渲染的效果不在此文讨论范围。表格最终渲染效果在Firefox 36.0或者Safari 8.0.7下实现。很可惜不是所有效果都能同时在两个浏览器中出现。
要说明的是，本文大部分内容可以说是对于 Dudley Storey的博文”CSS Design Patterns For HTML5 Tables”中表格实现的一些整理，偷懒的原因，使用的样例表格也是来自其中。 有兴趣的童鞋可以逛逛他的博客，或者看看他出的书”Pro CSS3 Animation”（不知道有没有中译本？）。当然根据思路后面也增加了一些本人的实现。
表格的HTML代码
没有特别研究过下面使用的HTML元素及属性是否符合HTML5规范，但设置doctype为支持HTML5的形式。
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body> <table> <caption>American Film Institute’s Top Five Films</caption> <thead> <tr> <th>Position <th>Movie <th>Year of Release </thead> <tbody> <tr> <td>1 <td>Citizen Kane <td>1941 <tr> <td>2 <td>The Godfather <td>1972 <tr> <td>3 <td>Casablanca <td>1942 <tr> <td>4 <td>Raging Bull <td>1980 <tr> <td>5 <td>Singin’ In The Rain <td>1952 </tbody> </table></body></html>1. 传统网格状表格
效果
CSS代码
table {
border-collapse: collapse;
font-family: Futura, Arial, sans-serif;
}
caption {
font-size: larger;
margin: 1em auto;
}
th,td {
padding: .65em;
}
th {
background: #555 nonerepeat scroll 0 0;
border: 1px solid #777;
color: #fff;
}
td {
border: 1px solid#777;
}说明
几个要注意的地方：
- 当渲染网格状表格时，往往说明对每个格子要加上边框。因此对于<th>, <td>，都要加上border属性。可想而知，如果这样的话，每个格子之间会出现两条边框。而我们又希望它们之间的边框只有一条，因此需要设置<table>的border-collapse属性为collapse。
- 表头和表格内容不一样，需要单独渲染。这儿通过设置<th>的background、color属性改变了表头的背景色和文字颜色。
2. 斑马条纹表格
效果
CSS代码
在上面CSS基础上增加以下代码：
tbody tr:nth-child(odd) {
background: #ccc;
}说明
带有条纹的表格也非常经典。当表格行数较多时，这样的表格比传统网格状表格更能看得清楚。这个效果就是通过在<tr>上调用CSS选择器nth-child(odd)完成的。这儿的传入参数可以是一个表达式（an+b），或者build-in的函数，比如odd表示奇数(2n+1)，而even是偶数（2n）。
3. 圆角表格
效果
CSS代码
table {
border-collapse: collapse;
font-family: Futura, Arial, sans-serif;
}
caption {
font-size: larger;
margin: 1em auto;
}
th,td {
padding: .65em;
}
th {
background: #555 nonerepeat scroll 0 0;
/* border: 1px solid #777; */
color: #fff;
}
td {
/* border: 1px solid #777; */
}
tbody tr:nth-child(odd) {
background: #ccc;
}
th:first-child {
border-radius: 9px 0 0 0;
}
th:last-child {
border-radius: 0 9px 0 0;
}
tr:last-child td:first-child {
border-radius: 0 0 0 9px;
}
tr:last-child td:last-child {
border-radius: 0 0 9px 0;
}说明
从最后面几个CSS 来看，圆角主要通过border-radius属性实现。选择的正是表格四个角上的四个<th>/<td>元素。不幸的是，在Firefox中只出现了上面两个圆角效果。Safari中则都渲染出来了。
而border-radius属性和border属性并不捆绑，因此要做圆角时，需要将原来的网格线取消。
4. 线型表格
效果
CSS代码
table {
border-collapse: collapse;
font-family: Futura, Arial, sans-serif;
}
caption {
font-size: larger;
margin: 1em auto;
}
th,td {
padding: .65em;
}
th,td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
text-align: center;
}说明
这也是非常常用的一种表格设计，多用在展示科学结果上。很多科学论文中往往会用这样的设计方式：简洁、明了。实现的原理也很简单，将原来<th>/<td>上的border属性拆分开来，通过border-top和border-bottom只渲染上下的网格线。当然为了格子之间不出现两条线，每个格子的线还要连到一起，务必设置<table>的border-collapse属性为collapse。
5. 表格行上的立体悬停效果
效果
CSS代码
在上面CSS基础上增加以下代码：
tbody tr:hover {
background: linear-gradient(#fff,#aaa);
font-size: 17px;
}说明
总的来说，表格是一种二维呈现，HTML中产生的表格看起来就像和纸上画的一样。但其实它也能实现一些立体的效果，就像这儿展示的，当鼠标悬停在某一行上时，该行突出在渐变的灰色背景上，字体微微变大，有一种被放大的效果。这是通过在<tr>上加上hover选择器，并设置了background属性值为inear-gradient(#fff, #aaa)，并增加了font-size。
转载请注明本文地址： 变化多端 – 多种纯CSS的HTML表格设计
变化多端 – 多种纯CSS的HTML表格设计相关推荐
- html css实现可下来的自定义表格,变化多端 – 多种纯CSS的HTML表格设计
介绍 在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之.但在实际项目开发中,一碰到规整的数据显示,不知不觉又会用起它.可见其生命力之顽强. 这儿 ...
- html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...
- 【css】纯css实现table表格固定表头，表内容滚动
今天在写公司项目的时候,遇到了一个比较xx的问题,现公司的项目使用的是 vue2.0 和 element-ui 搭建的. 那么提到 element-ui 大家都知道,他最实用的一个组件就是表格了,简直 ...
- Ajax/CSS表格设计汇集
来源:http://www.ffner.cn/bbs/redirect.php?tid=2611&goto=lastpost 当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣.今天我 ...
- 新奇漂亮的Ajax/CSS表格设计汇集
当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣.今天我们已经收集了20多个功能超大且看上去挺漂亮的Ajax/CSS表格设计,并且教你一些表格设计中所运用的技巧,例如表格数据的排序和过滤等. ...
- html自动适应布局,用纯CSS实现自适应布局表格
以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要.这种网页布局就是"自适应布局&q ...
- 21个强大漂亮Ajax/CSS表格设计
本文收集整理20多个功能超强并且挺漂亮的Ajax/CSS表格设计分享给大家,这些表格有表格数据的排序和过滤等. 让我们来看一下这些表格: 1. Tablecloth Tablecloth由CSS Gl ...
- html表格整体放大,纯CSS实现自适应布局表格
插件描述:如何让table元素也能表现出自适应性?按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它.那么,怎样让一个传统的表格也表现出自适应性呢? ...
- html图片自适应表格,如何用纯CSS实现自适应布局表格
您可能感兴趣的话题: CSS 核心提示:这是自适应布局技术中的一个难题,如何让table元素也能表现出自适应性. 以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的 ...
最新文章
- fft的c语言和matlab对比_Matlab系列之程序控制
- Netty对Protocol Buffer多协议的支持（八）
- 农业谋定竞争力-农业大健康·万祥军：质量效益促品牌农业
- 图片适应窗口_在word中插入图片，如何避免失真模糊？实用文档建议收藏
- java框架白话_Java NIO框架Netty教程(二) 白话概念
- 火眼睛睛查coredump(stl sort)------永远让比较函数对相同元素返回false
- ffmpeg 纯静态编译，以及添加自定义库流程摘要
- 苹果挖来ARM顶尖芯片工程师开发芯片 以减少对英特尔依赖
- 办公室健康小贴士(转)
- 我爱你们，我的家人和朋友
- ios时间相差多少天_iOS 时间戳和时间互换,计算两日期相隔天数
- Ubuntu 字体安装以及 vscode字体配置
- Translation 翻译插件google
- L1-087 机工士姆斯塔迪奥(Python3)
- Python 爬虫抓取网站汇率并将结果保存到文件
- perforce(p4) 使用
- 豆瓣电台WP7客户端 开发记录6
- c 语言中星号什么意思,Objective-C中的星号*是什么意思？
- 伪元素（3）-解决IE6/IE7/IE8不支持before,after问题
- 云端软件平台“天涯海阁”定制版 /