Rounded table corners CSS only

by

Seems to work fine in FF and Chrome (haven’t tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/

Edit: Here’s a relatively clean implementation of your sketch:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

More Related Contents:

  1. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  2. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  3. How to design a table like this
  4. How do I keep two side-by-side div elements the same height?
  5. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  6. Alternate table row color using CSS?
  7. How to make CSS3 rounded corners hide overflow in Chrome/Opera
  8. Why doesn’t table > tr > td work when using the child selector?
  9. Table with fixed header and fixed column on pure css
  10. How to display scroll bar onto a html table
  11. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  12. Fixed Table Cell Width
  13. How to make fill height
  14. Wrap text in tag
  15. CSS table-cell equal width
  16. How can I truncate table cells, but fit as much as content possible?
  17. Setting table column width
  18. How to force table cell content to wrap?
  19. Table scroll with HTML and CSS [duplicate]
  20. How to center the contents of an HTML table?
  21. How to hide Table Row Overflow?
  22. Giving a border to an HTML table row,
  23. Min-width and max-height for table attributes
  24. How can I apply a border only inside a table?
  25. Removing unwanted table cell borders with CSS
  26. Should Tables be avoided in HTML at any cost?
  27. Yet Another Divs vs Tables issue: Forms
  28. Styling the last td in a table with css
  29. Setting max-height for table cell contents
  30. How to make a table with equal column widths in CSS?

Leave a Comment