Question

表格border-radius有问题，根据表格中的行数而变化。在下面的图片中，您可以看到表格的两个底角遵循Bootstrap CSS border-radius属性。如果我手动删除某些行，则角落不再遵循该属性...

我在下面添加了HTML和CSS代码。

代码：

第一张图片HTML：

    <div class='panel panel-primary'>
    <div class='panel-heading'>Indicateurs<span class="sup"> 1</span>  : <span>Eaux usées</span></div>
        <div class="table-responsive">
            <table class='table table-striped' id='table-to-result-ass-indic'>
                <tbody>
                    <tr><th>Matériau</th>                                           <td>97.9 %</td>     <td>15452 m</td></tr>
                    <tr><th>Diamètre</th>                                           <td>99.1 %</td>     <td>15641 m</td></tr>
                    <tr><th>Matériau et diamètre</th>                               <td>99.1 %</td>     <td>15641 m</td></tr>
                    <tr><th>Période de pose<span class="sup"> 2</span></th>         <td>35.5 %</td>     <td>5603 m</td></tr>
                    <tr><th>Altimétrie<span class="sup"> 3</span></th>              <td>4.5 %</td>      <td>710 m</td></tr>
                    <tr><th>Nombre de branchements<span class="sup"> 4</span></th>  <td>18.5 %</td>     <td>190.467 km</td></tr>
                    <tr><th>Classe A<span class="sup"> 5</span></th>                <td>4.8 %</td>      <td>49.418 km</td></tr>
                    <tr><th>Classe B<span class="sup"> 5</span></th>                <td>0 %</td>        <td>0 km</td></tr>
                    <tr><th>Classe C<span class="sup"> 5</span></th>                <td>93.3 %</td>     <td>960.570 km</td></tr>
                    <tr><th>Classe non-renseignée<span class="sup"> 5</span></th>   <td>1.9 %</td>      <td>19.561 km</td></tr>
                    <tr><th>Linéaire total</th>                                     <td>100 %</td>      <td>1029.550 km</td></tr>
                </tbody>
            </table>
        </div>
</div>

第一张图片CSS：

第二张图片HTML：

    <div class='panel panel-primary'>
    <div class='panel-heading'>Indicateurs<span class="sup"> 1</span>  : <span>Eaux usées</span></div>
        <div class="table-responsive">
            <table class='table table-striped' id='table-to-result-ass-indic'>
                <tbody>
                    <tr><th>Matériau</th>                   <td>97.9 %</td>     <td>15452 m</td></tr>
                    <tr><th>Diamètre</th>                   <td>99.1 %</td>     <td>15641 m</td></tr>
                    <tr><th>Matériau et diamètre</th>       <td>99.1 %</td>     <td>15641 m</td></tr>
                    <tr><th>Classe A</th>                   <td>4.8 %</td>      <td>49.418 km</td></tr>
                    <tr><th>Classe B</th>                   <td>0 %</td>        <td>0 km</td></tr>
                    <tr><th>Classe C</th>                   <td>93.3 %</td>     <td>960.570 km</td></tr>
                    <tr><th>Classe non-renseignée</th>      <td>1.9 %</td>      <td>19.561 km</td></tr>
                    <tr><th>Linéaire total</th>             <td>100 %</td>      <td>1029.550 km</td></tr>
                </tbody>
            </table>
        </div>
</div>

第二张图片CSS：

Answer 1

将此添加到您的css

.table-striped tbody tr:last-child td
{
     border-radius:5px;
}

Answer 2

因为.panel 20px底部边距。这就是为什么底部边界半径隐藏或不可见。只需删除

.panel{
margin-bottom:20px;
}

Bootstrap：表border-radius奇怪的行为

2 个答案: