CODEWITHSUNDEEP
css
Dan
Dan

Reputation: 4512

Is there a clean way to get borders on a <tbody /> in pure CSS?

I'd like to set a background and a rounded border on a <tbody/>, such as

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }

However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.

I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }

This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?

Upvotes: 7

Views: 8536

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241128

Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.

Codepen example

CSS

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    width: 600px;
}

tbody {
    background: #ccf;
    border: 1px solid black;
    border-radius: 15px;
    display: block;
}

th, td {
    width: 200px;
}

td, th {
    padding: 5px;
    text-align: center;
}

Upvotes: 5

Related Questions