如何圆桌角[重复]答案

【问题标题】：How to round table corners [duplicate]如何圆桌角[重复]
【发布时间】：2020-02-21 17:46:49
【问题描述】：

如何使用 css 对 html 表格进行圆角？

表格如下：

<table>
    <tr>
       <th colspan="2">header</th>
    </tr>
     <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

CSS：

th {
    background-color: black;
    color: white;
    border: none;
}

table {
    border-collapse: collapse;
    border: 1px solid;
    border-radius: 5px;
}

table tr:first-child th:first-child {
    border-top-left-radius: 5px
}

table tr:first-child th:last-child {
    border-top-right-radius: 5px
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 5px
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 5px
}

只有右上角和左上角是圆角的，但它们上面有黑色边框，不是圆角。并且底角不是圆形的。我希望所有这些角落都是圆的。

【问题讨论】：

标签： html css

【解决方案1】：

简单。在桌子上使用border-radius。

table{
		border:1px solid black;
		border-radius:10px;
	}

<!DOCTYPE html>
<html>
<body>

<h2>Filterable Table</h2>
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>
  

</body>
</html>

【讨论】：

【解决方案2】：

试试这个，它也应该使它看起来更好看。你总是可以自己改变颜色。

body {
  margin: 30px;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 5px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 5px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

【讨论】：

【解决方案3】：

您提到的表格的解决方案

<style>
body {
  margin: 30px;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}
</style>
<table>
    <tr>
        <th colspan="2">header</th>
    </tr>
     <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

【讨论】：