的樣式表與CSS

Question

我有這樣

<table> 
    <tr> 
     <td>Content</td>      
     <td>Content</td>      
     <td>Content</td>           
    </tr> 
    <tr> 
     <td>Content</td>      
     <td>Content</td>      
     <td>Content</td>           
    </tr> 
    <tr> 
     <td>Content</td>      
     <td>Content</td>      
     <td>Content</td>           
    </tr> 
</table> 

HTML表格現在我需要它的樣式像這樣...

我用CSS嘗試過這樣的：

table td { 
    padding: 20px 20px; 
    width: 33%; 
    vertical-align: top; 
    border-bottom: 1px dashed #b4b4b4; 
    border-right: 1px dashed #b4b4b4; 
} 

但不能得到我期待的結果。我不能在這個問題上使用內聯樣式。

希望有人會幫助我。

謝謝。

Answer 1

http://jsfiddle.net/pjLFY/

你幾乎是正確的。

您需要設置的邊界沒有任何td的去年tr，但只設置是行的邊界無法比擬的。

table tr:last-child td { 
    border-bottom: none; 
} 

table td:last-child { 
    border-right: none; 
} 

Answer 2

你可以用:last-child來實現，所以 試試用這個。

table td:last-child 
{ 
    border-right:none; 
} 
table tr:last-child td 
{ 
    border-bottom:none; 
} 

JS Fiddle Demo

Answer 3

試試這個：

table td { 
    padding: 20px 20px; 
    width: 33%; 
    border-bottom: 1px dashed #b4b4b4; 
    border-right: 1px dashed #b4b4b4; 
    background: #FFFDDC; 
} 
table td:last-child { 
    border-right: 0; 
} 
table tr:last-child td { 
    border-bottom: 0; 
} 

Answer 4

如果你不想使用:last-child，你知道網頁的背景顏色，你可以添加以下：

table { 
    border-collapse: collapse; 
    border: 1px solid white; 
} 

Answer 5

代替用none或0覆蓋，你可以使用:last-child和:not這樣的：

table td { 
    padding: 20px 20px; 
    width: 33%; 
    vertical-align: top; 
} 
table tr:not(:last-child) td { 
    border-bottom: 1px dashed #b4b4b4; 
} 
table td:not(:last-child) { 
    border-right: 1px dashed #b4b4b4;  
} 

參見jsFiddle。