css-表格的美化总结

2 篇文章 0 订阅

先说最近遇到一个很麻烦而且蛋疼的事情,感觉最近老板有点吃错药了,把我调到数据库服务平台的项目,要我主要负责的是美化这个项目的界面(注:因为这个项目的界面确实是很丑,丑的要命),但是,蛋疼的事情来了,老板只是要我暂时修改一下表格,因为数据库服务的其中一个主要的功能就是数据的展示,一个表格有时候会有15列数据。但是我就纳闷了,整个界面丑得要命,只是修改一个表格就可以解决的,于是我微调了一下表格的每一个cell的高度,间距,字体的大小,样式,心里想,表格嘛,最多就那样,难道还能改出一个多花来。可是,痛不欲生。老板总是觉得自己没有做事一样,每次 一下,就说,“没什么变化啊!!”,你不要老是改那些整体的样式,先把最重要的数据展示的那一块做好来,然后就指着表格说一些没有用的话,最后丢了一句,把表格改好一点。天哪,一个表格还能改出一朵花来嘛??
由于只能继续改了,一下就是我最近修改表格的总结了。

1,thead和tbody的每一个行占的高度是不一样的,重点是在body所以head的行高最好还是要小于body的每一个列的行高。比如说,

table thread tr td {height:36px;}
table tbody  tr td {height:43px;}

2,修改字体,将thead的字体修改为粗体,主要还是强调表头的信息

table thread tr td {
    font-size:14px;
    font-weight:bold;
    font-family:'Open Sans',sans-serif;
    color:#333;
}
table thread tr td {
    font-size:14px;
    font-family:'Open Sans',sans-serif;
    color:#333;
}

3,表头的字体最好是垂直居中
4,border边的颜色和粗细,最好是使用1像素,颜色使用的是#ddd色系。

未完待续。。。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值