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

正在进行破坏的桌子上的边界崩溃。显然你仍然需要这样。。

向第一个单元格添加border-right，仅向第二个单元格添加border-right。

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，而是使用透明

然后设置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;
}

表格边框HTML + CSS

3 个答案: