Table with rounded borders and borders between rows

Question

I'm trying to make a full width table that has rounded corners, a border around the entire table, and a border under each table row (except the last one, don't want to double up...).

My sample: http://jsfiddle.net/7xD64/13/

My code:

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
  </tbody>
</table>

table {
    overflow: hidden;
    border-radius: 10px;
    background-color: white;
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}
tr {
    border-bottom: 1px solid black;
}

This works perfectly in Chrome, but is broken in Safari (there is no outer border). If I remove the overflow: hidden it renders the outer border, but the table doesn't have rounded edges.

I've found a few solutions, but they don't seem to work on tables (or, as is likely, I'm not implementing them properly).

Question: Is it possible to make a table that has the following and works in Chrome, Safari and IE(8+)?

border around the entire table
rounded edges (with border) for the table
borders at the bottom of each table row
table is full width

If is is possible, could you please update my fiddle / code to explain how it works? (I'm still getting started with CSS, and I get pretty confused about where to put the rules.)

Thanks!

Sorry that the question deserved a down vote, I'm happy to fix it. Could you please let me know what I should change to make it less down-vote-worthy? — Lucy Bain, Aug 05 '14 at 06:31

Suresh Karia · Answer 1 · 2014-08-05T06:42:34.717

Your Updated jsFiddle Table Your Table

General table Bordered Table

HTML

    <table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

CSS

 table {
max-width: 100%;
width: 100%;
background-color: transparent;
margin-bottom: 20px;
border-spacing: 0;
border:1px solid #ddd;
border-radius:15px;
overflow:hidden;

}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

Thanks very much, this works (although there's a weird double border at the very top). I accepted @suresh-ponnukalai's answer since it was more simple and was easy to implement. But I still up voted for a correct answer :) — Lucy Bain, Aug 05 '14 at 06:46

Suresh Ponnukalai · Accepted Answer · 2014-08-05T06:43:02.527

0

Create one div outside of your table and apply the border radius. Also use last-child property to remove the border for the last items.

CSS:

#mytable{
border-radius: 10px;
background-color: white;
border: 1px solid black;
}
.mytable {
border-collapse: collapse;
border-spacing: 0;
}
.mytable tr td {
border-bottom: 1px solid black;
}
.mytable tr:last-child td {
border-bottom: 0px solid black;
}

HTML

<div id="mytable">
<table class="mytable" width="100%">
<tbody>
<tr>
  <td>One</td>
  <td>Two</td>
</tr>
<tr>
  <td>Three</td>
  <td>Four</td>
</tr>
</tbody>
</table>
</div>

DEMO

edited Aug 05 '14 at 06:43

answered Aug 05 '14 at 06:17

Suresh Ponnukalai

13,820
5
34
54

Thanks for the response - I didn't down vote, promise! I actually need the table `width: 100%` (sorry I didn't include it, I didn't think it'd matter). Is it possible to get the rows to also be full width in this case? – Lucy Bain Aug 05 '14 at 06:23
use `display:block` instead of `display:inline-block` – Suresh Ponnukalai Aug 05 '14 at 06:23
Hmmm, rows are still not full width: http://jsfiddle.net/7xD64/6/ I also tried setting the tr to `width: 100%` and the td to `width: 50%` without success http://jsfiddle.net/7xD64/8/ – Lucy Bain Aug 05 '14 at 06:28
Downvoter is right. The way I try to find a answer is wrong. I am going to update my answer soon. wait for a min. – Suresh Ponnukalai Aug 05 '14 at 06:33
Yay! It works, thank you very much! I have accepted and up voted. No idea why it was down voted :( – Lucy Bain Aug 05 '14 at 06:41

score 0 · Answer 3 · answered Aug 05 '14 at 06:17

0

Try following code for rounded border and it should work in all browsers

table {
    overflow: hidden;
    border-radius: 10px;
    background-color: white;
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0;
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;

}

answered Aug 05 '14 at 06:17

Richa

3,261
2
27
51

Thanks for the response - I didn't down vote, promise! The solution you gave doesn't seem to work in safari http://jsfiddle.net/7xD64/5/ Did I miss something? – Lucy Bain Aug 05 '14 at 06:24
I put your code in this fiddle http://jsfiddle.net/7xD64/5/ and if you look at it in Safari you can see that the table border doesn't render. – Lucy Bain Aug 05 '14 at 06:47

Table with rounded borders and borders between rows

3 Answers3