html table边框 1像素边框 内嵌table边框重合

一、1像素table边框

方法一：

使用border-collapse: collapse方法把多重合的粗边框合并。不过border-collapse方法在FireFox，IE6，IE7和打印功能可能会出现一些小bug，使用时应注意。

<style type="text/css">
table{
width: 500px;
height: 500px;
border:solid 1px #000;
border-collapse: collapse;
}
td{
border:solid 1px #000;
}
</style>

方法二：

控制每条外边框的显示，使每条边框都不重合，从而没有粗边框。

<style type="text/css">
table{
width: 500px;
height: 500px;
border:solid 1px #000;
border-width:0px 1px 1px 0px;
}
td{
border:solid 1px #000;
border-width:1px 0px 0px 1px;
}
</style>

方法三：

使用该方法还需要设置table的cellspacing="1"，浏览器不同cellspacing的数值可能需要改成2或者3才能显示出来。通过设定表格背景色和间距来显示1像素边框的样子。

<style type="text/css">
table{
width: 500px;
height: 500px;
        border-width: 0px;
        background-color: #000;
}
td{
background-color: #fff;
}
</style>

table代码如下：

<table cellspacing="0" cellpadding="20">
    <tr>
    <td>ww</td>
    <td>ww</td>
    <td>ww</td>
    </tr>
    <tr>
    <td>ww</td>
    <td>ww</td>
    <td>ww</td>
    </tr>
    <tr>
    <td>ww</td>
    <td>ww</td>
    <td>ww</td>
    </tr>
    </table>

二、table里内嵌table边框重合

<style type="text/css">
td{
border:solid 1px #000;
}
</style>

<table cellspacing="0" cellpadding="20" style="width: 500px;height: 500px;border:solid 1px #000;border-collapse: collapse;">
    <tr>
    <td>ww</td>
    <td>ww</td>
    <td>ww</td>
    </tr>
    <tr>
    <td style="padding:0">
    <table cellspacing="0" cellpadding="20" style="width:100%;height:100%;border-collapse: collapse;border-width:0px; border-style:hidden;">
    <tr>
    <td>ww</td>
    <td>ww</td>
    </tr>
    <tr>
    <td>ww</td>
    <td>ww</td>
    </tr>
   </table>
    </td>
    <td>ww</td>
    <td>ww</td>
    </tr>
    <tr>
    <td>ww</td>
    <td>ww</td>
    <td>ww</td>
    </tr>
    </table>