CODEWITHSUNDEEP
htmlcss
TNK
TNK

Reputation: 4333

Styling a table with CSS

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

enter image description here

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.

Upvotes: 0

Views: 125

Answers (5)

Antony
Antony

Reputation: 15114

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.

Upvotes: 1

Philippe Signoret
Philippe Signoret

Reputation: 14376

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

Upvotes: 1

Matt Davies
Matt Davies

Reputation: 1269

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

Upvotes: 1

XCS
XCS

Reputation: 28177

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

Upvotes: 1

Sachin
Sachin

Reputation: 40990

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

Upvotes: 1

Related Questions