1

我遇到了这个奇怪的小问题，我无法解决问题。它需要做的是：有 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>

有谁知道为什么我无法修复它？

4

3 回答 3

0

造成损害的是桌子上的边框倒塌。显然你仍然需要这样。. .

在第一个单元格中添加一个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/

于 2013-10-17T14:04:17.290 回答
0

所以不要使用#FFFFFF，而是使用透明

然后设置td的border-right

 td {
     border-right:1px solid #000;
 }
 td:last-of-type {
     border-right 1px solid transparent
 }
于 2013-10-17T14:05:16.393 回答
0

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

即使 centercell 有它自己的类，它仍然是一个 table 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;
}
于 2013-10-17T14:09:35.120 回答