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;}
只显示上边框 只显示下边框 只显示左、右边框 只显示上、下边框 只显示左边框 只显示右边框 不显示任何边框
复制代码代码如下: <html> <head> <title>表格边框的隐藏</title> <meta http-equiv=”Content-Type” content=”text/html; charset=u
评论0