如何圆桌角[重复]

Question

如何使用 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
}

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

Answer 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>

Answer 2

试试这个，它也应该使它看起来更好看。 您可以随时自行更改 colors。

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

Answer 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>

如何圆桌角[重复]

问题描述

3 个解决方案

解决方案1
1 2019-10-25 11:20:23

解决方案2
0 2019-10-25 11:22:16

解决方案3
0 2019-10-25 11:23:07

如何圆桌角[重复]

问题描述

3 个解决方案

解决方案1 1 2019-10-25 11:20:23

解决方案2 0 2019-10-25 11:22:16

解决方案3 0 2019-10-25 11:23:07

解决方案1
1 2019-10-25 11:20:23

解决方案2
0 2019-10-25 11:22:16

解决方案3
0 2019-10-25 11:23:07