表格邊框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

回答

相關問題