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

尝试一下，它也应该看起来更好一点。您随时可以自己更改颜色。

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 个答案: