我尝试给我的bootstrap 5表添加一个边界半径....我做了一些研究,很多解决方案都说用div
Package 表,并将border-radius
应用到div
。我尝试过这样做,但边界半径对我的表没有影响。我也尝试过添加边界-radius类添加到table
,但它仍然对表没有影响。
我对a div应用了相同的css类,border-radius属性也按预期应用了。
如何将border-radius应用于引导表?
下面是一个代码片段:
.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>
2条答案
按热度按时间djmepvbi1#
边界半径应用于父div -它只是溢出。
将
overflow:hidden
应用于父表:sf6xfgos2#
Bootstrap有自己的类要使用。