的样式表与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。