<分区>
<分区>
如何使用 css 使 html 表格 Angular 变圆？
表格如下所示:
<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
}
只有右上角和左上角是圆 Angular 的，但它们上面有黑色边框没有圆 Angular 。并且底 Angular 不是圆形的。 我希望所有这些 Angular 都是圆的。
最佳答案
简单。在表格上使用 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>关于html - 怎样把 table Angular 弄圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58557412/