表格边框HTML + CSS

我有这个奇怪的小问题，我不能让我的头缠住。它需要做的是：表格有3个单元格，除了所有单元格的顶部边框和中间单元格的左边框和右边框之外没有/白色边框。表格边框HTML + CSS

下面是代码：

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>

没有任何人有任何想法，为什么我不能把它固定的吗？

来源

2013-10-17 user2890690

你可以做小提琴吗？我可以告诉你，你为此写了太多的CSS，但我想要一个小提琴，以确保我给你提供合理的建议。 – BTC

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

向第一个单元格添加一个边框右侧，并且仅向第二个边框添加右侧边界。

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-17 14:04:17

因此，而不是使用#FFFFFF，使用透明

然后设置TD的右边框

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

来源

2013-10-17 14:05:16 BTC

我相信这是你'寻找：http://jsfiddle.net/2F8vF/2/

即使c entercell有它自己的类，它仍然是一个表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-17 14:09:35

表格边框HTML + CSS

回答

相关问题