Стилизация стол с CSS

Question

У меня есть HTML таблицы, как этот

<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> 

Теперь мне нужно, чтобы стиль это что-то вроде этого ...

Я попробовал его с помощью 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.