CODEWITHSUNDEEP
htmlcss
Christoffer
Christoffer

Reputation: 514

Border on both tbody and td?

I have a table with a number of tbody's to group rows. I want border on each td to make a grid, but I also want border on the surrounding tbody to show that they are grouped. Is that possible?

http://jsfiddle.net/jyRsy/

Upvotes: 3

Views: 138

Answers (3)

skip405
skip405

Reputation: 6279

It looks like the border property on the tds is simply applied on top of the tbody's one :)

If you add at least 2px, not one - it will work. (http://jsfiddle.net/jyRsy/4/ - in this example - it's 3px.) I have tested this fiddle in all modern browsers. It works everywhere from IE8 on. As for IE7 - I'd not pay attention ;)

Upvotes: 4

Prashobh
Prashobh

Reputation: 9552

td { 
    border: 1px solid blue;
}

tbody {
    border: 2px solid red; 
}​

Upvotes: 4

TheBlackBenzKid
TheBlackBenzKid

Reputation: 27087

JS Fiddle. See http://jsfiddle.net/Dv4T6/

<table width="300">
    <thead>
        <tr>
            <th width="60" align="center" valign="top" scope="col">Type</th>
            <th width="200" align="left" valign="top" scope="col">Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" valign="top">Shipping</td>
            <td align="left" valign="top">123 Main St</td>
        </tr>
    </tbody>
</table>

Full browser and device support is not guaranteed.

Upvotes: 1

Related Questions