我正在尝试在我的 Bootstrap 5 表中添加边框半径....并应用 div
到那个border-radius
.我试图这样做,但边界半径对我的 table 没有影响。我还尝试将边界半径类添加到 div
但它仍然对 table 没有影响。
我已将相同的 css 类应用于 div,并且按预期应用了border-radius 属性。
如何将边框半径应用于我的 Bootstrap 表?
这是一个代码片段:
.tbl-container { width: 400px; margin-top: 10px; margin-left: 10px;}
.bg-red {background-color:red; color:white;}
.bdr {border-radius: 6px;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tbl-container bdr">
<table class="table bdr">
<thead class="bg-red">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="tbl-container">
<div class="bg-red bdr">
TESTING BORDER
</div>
</div>
最佳答案
边框半径正在应用于父 div - 它只是溢出。
申请 overflow:hidden
到表父:
.tbl-container {
width: 400px;
margin-top: 10px;
margin-left: 10px;
}
.bg-red {
background-color: red;
color: white;
}
.bdr {
border-radius: 6px;
overflow: hidden;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="tbl-container bdr"> <!-- <== overflow: hidden applied to parent -->
<table class="table">
<thead class="bg-red">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
关于html - 将边界半径应用于 Bootstrap 5 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65351061/