HTML 小技巧：将 table 边框改为细线
2010-02-21 作者: 来源:网页教学网 【大 中 小】 评论:0 软件:
HTML 制作新手在用 TABLE 表格时，会碰到如何改变边线粗线，因为默认
的 TABLE 边线设置即使是 1px 是很粗的。因此会使用其他一些方法来制作出细线边框，
这里介绍一种利用 CSS 来实现细线的方法，很有效，而且兼容所有浏览器。
细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用 CSS2 的
"border-collapse:collapse;" 属性合并表格边框；并对 table 元素设置左边框和上边框，
对 th 和 td 元素设置右边框和下边框。
HTML：
<table>
!!! <tr>
!!!!!!! <th>table head (row1, col1)</th>
!!!!!!! <th>table head (row1, col2)</th>
!!!!!!! <th>table head (row1, col3)</th>
!!! </tr>
!!! <tr>
!!!!!!! <td>table data (row1, col1)</td>
!!!!!!! <td>table data (row1, col2)</td>
!!!!!!! <td>table data (row1, col3)</td>
!!! </tr>
!!! <tr>
!!!!!!! <td>table data (row2, col1)</td>
!!!!!!! <td>table data (row2, col2)</td>
!!!!!!! <td>table data (row2, col3)</td>
!!! </tr>
</table>
CSS:
table{border-collapse:collapse;border-spacing:0;border-left:1px
solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid
#888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
资源评论
xujiangmiao
- 粉丝: 1
- 资源: 8
最新资源
- 从XML生成可与Ajax共同使用的JSON中文WORD版最新版本
- silverlight通过WebService连接数据库中文WORD版最新版本
- 使用NetBeans连接SQLserver2008数据库教程中文WORD版最新版本
- XPath实例中文WORD版最新版本
- XPath语法规则中文WORD版最新版本
- XPath入门教程中文WORD版最新版本
- ORACLE数据库管理系统体系结构中文WORD版最新版本
- Sybase数据库安装以及新建数据库中文WORD版最新版本
- tomcat6.0配置oracle数据库连接池中文WORD版最新版本
- hibernate连接oracle数据库中文WORD版最新版本
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
