带有圆形边框和行间边框的表格

Question

我正在尝试制作一个具有圆角的全宽表格，整个表格的边框以及每个表格行下方的边​​框（最后一个除外，不想加倍......）。

我的样本：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 它会呈现外边框，但表格没有圆边。

我找到了fewsolutions，但它们似乎不适用于表格（或者，很可能，我没有正确实施它们）。

问题：是否可以制作一个包含以下内容并在 Chrome、Safari 和 IE(8+) 中工作的表格？

1. 整个表格的边框
2. 表格的圆边（带边框）
3. 每个表格行底部的边框
4. 桌子是全宽的

如果可能，您能否更新我的小提琴/代码以解释它是如何工作的？ （我还在开始使用 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;
}

Answer 2

在表格外创建一个 div 并应用边框半径。还可以使用last-child 属性来移除最后一项的边框。

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

尝试以下圆角边框代码，它应该适用于所有浏览器

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;

}