table 细边框

时间：2015-3-30类别：Web前端

table 细边框

table 细边框

方式1

设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。

方式2

设置BORDER=0 ，再通过CSS，给Table加上1px的border-top,border-left，然后再设置所有的td的border-right,border-bottom，这样也能达到所要的效果。

方式3

设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;}

其中，border-collapse有两个属性，separate 和 collapse

1、separate是默认属性，表格边框默认有1px 的间隙

2、collapse，是将表格边框的间隙去掉，这样给表格的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;}

标签：

table

table 细边框

table 细边框

猜您喜欢

热门推荐