html - 具有圆形边框和行间边框的表格

Question

我正在尝试制作一个具有圆 Angular 的全宽表格，整个表格周围有一个边框，每个表格行下面都有一个边框(除了最后一个，不想加倍......)。

我的样本:http://jsfiddle.net/7xD64/13/

我的代码:

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

这在 Chrome 中完美运行，但在 Safari 中被破坏(没有外边框)。如果我删除 overflow: hidden，它会呈现外边框，但表格没有圆边。

我找到了 few solutions ，但它们似乎不适用于表格(或者，很可能，我没有正确实现它们)。

问题:是否可以制作一个具有以下内容并适用于 Chrome、Safari 和 IE(8+) 的表格？

1. 围绕整个表格的边框
2. 表格的圆边(带边框)
3. 每个表格行底部的边框
4. 表格是全宽的

如果可能的话，你能更新我的 fiddle /代码来解释它是如何工作的吗？ (我仍然刚开始使用 CSS，我对将规则放在哪里感到很困惑。)

谢谢!

Answer 1

您更新的 jsFiddle 表 Your 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;
}