将边界半径应用于引导 5 表答案

【问题标题】：Applying border-radius to bootstrap 5 table将边界半径应用于引导 5 表
【发布时间】：2022-01-18 12:18:49
【问题描述】：

我正在尝试在我的 bootstrap 5 表中添加一个边框半径......我已经做了一些研究，许多解决方案都说将表包装在 div 中并应用 border-radius 到那个div。我试图这样做，但边界半径对我的桌子没有影响。我也尝试将border-radius 类添加到table，但它仍然对桌子没有影响。

我已将相同的 css 类应用于 a div，并且按预期应用了边框半径属性。

如何将边框半径应用于我的引导表？

这是一个代码sn-p：

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

边框半径正在应用于父 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>

【讨论】：