Skip to content

Instantly share code, notes, and snippets.

@leek
Forked from Samnan/rounded_corners_table.sass
Created January 20, 2012 02:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leek/1644618 to your computer and use it in GitHub Desktop.
Save leek/1644618 to your computer and use it in GitHub Desktop.
Here's how to do a table with rounded corners in CSS3 -- Updated: Fixed bug where bottom left corner wouldn't be rounded with only one TD in last TR
@import compass/reset
@import compass/css3/border-radius
table
border: none
border-collapse: separate
th, td
padding: 5px
thead
background-color: #f2f6fa
th
border: 1px solid #ccc
border-left: none
&:first-child
border-left: 1px solid #ccc
@include border-top-left-radius(5px)
&:last-child
border-right: 1px solid #ccc
@include border-top-right-radius(5px)
tbody
tr
td
border-right: 1px solid #ccc
border-bottom: 1px solid #ccc
&:first-child
border-left: 1px solid #ccc
&:last-child
td
&:first-child
@include border-bottom-left-radius(5px)
&:last-child
@include border-bottom-right-radius(5px)
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>john</td>
<td>john@domain.com</td>
</tr>
<tr>
<td>jane</td>
<td>jane@domain.com</td>
</tr>
</tbody>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment