表格边框HTML+CSS

Question

我有个奇怪的小问题我想不通了。它需要做的是:表格有3个单元格，除了所有单元格的上边框和中间单元格的左右边框外，没有/白色边框。

代码如下：

CSS：

table{
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    border-width: 1px;
    border-collapse: collapse;
}
table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-top-color:#000000;
    border-right-color:#FFFFFF;
    border-bottom-color:#FFFFFF;
    border-left-color:#FFFFFF;
}

table td.centercell {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-top-color: #000000;
    border-right-color:#000000;
    border-bottom-color:#FFFFFF;
    border-left-color:#000000;
    z-index:10;
}

HTML：

<table>
    <tr>
        <td>Info Header 1</td>
        <td class="centercell">Info Header 2</td>
        <td>Info Header 3</td>
    </tr>
</table>

有人知道为什么我修不好它吗？

Answer 1

造成损害的是桌子上的边界塌陷。显然，你仍然需要这样做。。。

在第一个单元格中添加右边框，在第二个单元格中仅添加右边框。

table td.centercell {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-top-color: #000000;
    border-right-color:#000000;
    z-index:10;
}  
td:first-child{
    border-right: 1px solid #000000;
}

小提琴在这里：http://jsfiddle.net/7t85q/

Answer 2

所以不要使用#FFFFFF，而要使用transparent

然后设置td的右边框。

 td {
     border-right:1px solid #000;
 }
 td:last-of-type {
     border-right 1px solid transparent
 }

Answer 3

我相信这就是你要找的：http://jsfiddle.net/2F8vF/2/

即使centercell有它自己的类，它仍然是一个表td类。所以它抓取了一些你不想要的CSS。

table td {
    padding:8px;
    border-top: 1px solid #000;
    border-left:0px;
    border-right:0px;
    border-bottom:0px;
}

table td.centercell {
    border-left:1px solid #000;
    border-right:1px solid #000;
}