表格边框 HTML+CSS答案

【问题标题】：Tables border HTML+CSS表格边框 HTML+CSS
【发布时间】：2013-10-26 01:24:36
【问题描述】：

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

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

【问题讨论】：

你会做一个小提琴吗？我可以告诉你，你为此写了太多的 CSS，但我想要一个小提琴来确保我给你的建议是正确的。

标签： html css html-table border

【解决方案1】：

我相信这就是你要找的东西：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;
}

【讨论】：

【解决方案2】：

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

然后设置td的border-right

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

【讨论】：

【解决方案3】：

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

为第一个单元格添加一个右边框，只为第二个单元格添加一个右边框。

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/

【讨论】：