Styling a table with CSS - html

Question

I have a HTML table like this
<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>
Now I need to style it something like this...
I tried it with CSS like this :
table td {
padding: 20px 20px;
width: 33%;
vertical-align: top;
border-bottom: 1px dashed #b4b4b4;
border-right: 1px dashed #b4b4b4;
}
But can't get my expecting result. I can't use inline style with this issue.
Hope someone will help me out.
Thank you.

Answer 1

http://jsfiddle.net/pjLFY/
You almost got it right.
You need to set the border to none of td's in last tr, but you only set the border of that row to none.
table tr:last-child td {
border-bottom: none;
}
table td:last-child {
border-right: none;
}

Answer 2

you can achieve it using :last-child so
try using this.
table td:last-child
{
border-right:none;
}
table tr:last-child td
{
border-bottom:none;
}
JS Fiddle Demo

Answer 3

Try this:
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

If you don't want to use :last-child, and you know the background color of the page, try adding this:
table {
border-collapse: collapse;
border: 1px solid white;
}

Answer 5

Instead of overriding with none or 0, you can use :last-child with :not like this:
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;
}
See jsFiddle.