table完美css样式,table的基本样式,table样式
CSS 基本 Table 完美 样式
2023-09-11 14:18:15 时间
table完美css样式,table的基本样式,table样式
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 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/
相关文章
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- CSS - 工具类 tool.css
- 【原】css实现两端对齐的3种方法
- CSS中的行为——expression
- 用 CSS 定义元素外观
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- CSS学习(1)(网页编程)
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 为什么CSS这么难学?css核心知识点攻坚指南
- 如何在ui5 xml view中使用嵌入的自定义css style
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05
- CSS - 样式以及样式权重
- css案例3——盒子水平垂直居中