Table with rounded borders and borders between rows - html

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!

Answer 1

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;
}

Answer 2

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

Answer 3

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;
}