Question

我正在尝试制作一个全角度的桌子，它有圆角，整个桌子周围的边框，以及每个桌子行下面的边框（除了最后一个，不想加倍......）。

我的代码：

<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 +）中使用？

围绕整个桌子的边界
表格的圆边（带边框）
每个表格行底部的边框
表格为全宽

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

}

带圆角边框和行之间边框的表格

3 个答案: