table完美css样式,table的基本样式,table样式
2016-06-15 09:08
507 查看
table完美css样式,table的基本样式,table样式
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年6月15日 09:04:26 星期三
http://fanshuyao.iteye.com/
一、table的css样式
边框线不会重复叠加,不会有些粗有些细,全部统一。
二、使用方法
三、Demo展示
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年6月15日 09:04:26 星期三
http://fanshuyao.iteye.com/
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年6月15日 09:04:26 星期三
http://fanshuyao.iteye.com/
一、table的css样式
边框线不会重复叠加,不会有些粗有些细,全部统一。
/*table start*/ table.default-table{ /* -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius:5px; */ width: 100%; border:solid #333; border-width:1px 0px 0px 1px; font-size: #333; border-collapse: collapse; border-spacing: 0; } table.default-table tbody tr{ height: 20px; line-height: 20px; } table.default-table tbody tr.odd{ background-color: #fff; } table.default-table tbody tr.even{ background-color: #F5F5F5; } table.default-table tbody tr:hover{ background-color: #eee; } table.default-table tbody tr th,table.default-table tbody tr td{ padding:3px 5px; text-align: left; /* border: 1px solid #ddd; */ border:solid #333; border-width:0px 1px 1px 0px; } table.default-table tbody tr th{ font-weight: bold; text-align: center; } table.default-table tbody tr td.tac{ text-align: center; } table.default-table tbody tr td a:hover{ color:#0080c0; } /*table end*/
二、使用方法
<table class="default-table"> <tr> <th>序号</th> <th>产品名称</th> <th>规格</th> <th>数量</th> <th>单位</th> </tr> <tr> <td class="tac">1</td> <td>这是标题这是标题这是标题这是标题这是标题这是标题</td> <td class="tac">AAA</td> <td class="tac">6</td> <td class="tac">个</td> </tr> </c:forEach> </table>
三、Demo展示
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年6月15日 09:04:26 星期三
http://fanshuyao.iteye.com/
相关文章推荐
- 参考手册(html css)
- 2、HTML与CSS基础
- Grunt压缩、合并js/css文件
- css层叠样式的次序y
- CSS样式坑总结
- CSS3动画 ☞ animation-time-function ☞ step属性
- CSS3 transform 属性
- CSS换行文本溢出显示省略号
- CSS基础:div设置透明度、圆角、投影
- CSS笔记(一):before伪元素实现半透明背景图
- CSS学习6(元素框)
- 自己制作调节阴影的CSS3小部件!
- CSSHACK解决IE兼容性问题
- css 横向渐变 图片阴影效果 字体模糊效果
- css 横向渐变 图片阴影效果 字体模糊效果
- css技巧
- css技巧
- css 横向渐变 图片阴影效果 字体模糊效果
- css标签复习---2016.6.14
- 纯CSS实现下拉菜单导航