html 美化table,纯CSS美化HTML的Table

今天发觉一个很好的表格CSS代码： http://veerle-v2.duoh.com/blog/comments/a_css_styled_table

整体的CSS代码：

body {

font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

background: #E6EAE9;

}

a {

color: #c75f3e;

}

#mytable {

width: 700px;

padding: 0;

margin: 0;

}

caption {

padding: 0 0 5px 0;

width: 700px;

font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

text-align: right;

}

th {

font: bold 11px "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 url(images/bg_header.jpg) no-repeat;

}

th.nobg {

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt {

background: #F5FAFA;

color: #797268;

}

th.spec {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #fff url(images/bullet1.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

th.specalt {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #f5fafa url(images/bullet2.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #797268;

}

整体的表格代码：

CSS Tables

Table 1: Power Mac G5 tech specs

Configurations

Dual 1.8GHz

Dual 2GHz

Dual 2.5GHz

Model

M9454LL/A

M9455LL/A

M9457LL/A

G5 Processor

Dual 1.8GHz PowerPC G5

Dual 2GHz PowerPC G5

Dual 2.5GHz PowerPC G5

Frontside bus

900MHz per processor

1GHz per processor

1.25GHz per processor

Level2 Cache

512K per processor

我做了点改进，使用了CSS选择器让奇数行，偶数行颜色不一样：

.gradientTable {

width: auto;

padding: 0;

border-spacing: 0px;

}

.gradientTable th {

font: bold 11px "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 url(/images/bg_header.jpg) no-repeat;

}

.gradientTable th.nobg {

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

.gradientTable td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

font-size: 11px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

.gradientTable tr:nth-child(odd) {

background: #fff;

}

.gradientTable tr:nth-child(even) {

background: #F5FAFA;

}

html 美化table,纯CSS美化HTML的Table相关推荐

纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...
css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...
iview中纯CSS美化select和Cascader滚动条
示例:如果我们想美化,iview组件库中select的滚动条如果想在当前页生效: style标签里面要加scoped /deep/.ivu-select-dropdown {overflow-y: ...
纯CSS美化单复选框（checkbox、radio）
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
纯css美化单选与复选框
先看一下实现效果 <html><head> <meta charset="gb2312"> <meta charset="utf ...
html表格美化模板,JavaScript + CSS 美化出的条纹表格样式
表格样式 body{ margin: 6px; padding: 0; font-size: 12px; font-family: tahoma, arial; background: #fff; } ...
html美化file按钮,css 美化file按钮
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
在线CSS美化格式化工具
在线CSS美化格式化工具在线CSS美化格式化工具美化格式化CSS:压缩缩小CSS 代码以美化.格式化.美化,使你的 CSS 更易于阅读.语法高亮.自动完成功能也可以更轻松地编写代码. 美化格式化C ...

html 美化table,纯CSS美化HTML的Table

html 美化table,纯CSS美化HTML的Table相关推荐

最新文章

热门文章