圆形边界表

Question

我希望有一个带圆角边框的HTML表格。我不希望在桌子旁边有一条圆线，但实际上它的形状是四舍五入的。

请注意，顶行和底行都应该是圆的。

顺便说一句，我的实际表格正在使用＆＃34; table table-bordered table-hover＆＃34;来自bootstrap的css类。

这是我的实际表格：

这就是我尝试做的事情：

有任何想法吗？谢谢！

Answer 1

您可以通过将border-radius添加到css来执行此操作。

table {
   border-radius: 4px;
}

我写了一个非常快速的例子，所以你可以看到输出;

http://jsfiddle.net/oLrp862d/1/

---

编辑在此处包含代码;

table {
    background: white;
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    width: 50%;
    border-spacing: 0px;
    border-collapse: separate;
}
table th {
    font-weight: 600;
    font-size: 1.1em;
    text-align: center;
    background: #c6c6c6;
}
table td {
    background: transparent;
}

<table>
    <tr>
        <th>Name</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
</table>

Answer 2

table tr:first-of-type {
    border-radius: 5px 5px 0 0;}

table tr:last-of-type {
    border-radius: 0 0 5px 5px;}

或将其放在桌子上

table {
    border-radius: 5px;}

Answer 3

使用此CSS代码围绕角落：

.table-bordered {
  border-radius: 5px;
}

Answer 4

研究下面的例子。

table {
   border-radius: 10px;
    border: solid 2px red;
    width: 400px;
    height: 400px;
    overflow: hidden;
  
}

tr:last-of-type td {
  border-bottom: none;
  }

tr td:last-child {
  border-right: none;
  }


td {
    text-align: center;
   border-bottom: solid 1px #000;
  border-right: solid 1px #000;
  
}

<table>
    <tr>
        <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
        <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
         <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
</table>