如何在div中添加响应式水平滚动条？

Kemat Rochi 发表于 Dev

凯玛特·罗奇（Kemat Rochi）

我有一个固定宽度的Bootstrap表，像这样，

<div class="container">

      <table class="table table-striped table-bordered" style="width: 800px;">
        <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
        <tr><td><a class="cl" href="">Mickey</a></td><td>Mouse</td><td>5</td>
        <tr><td><a class="cl" href="">Tom</a></td><td>Cat</td><td>6</td>
        <tr><td><a class="cl" href="">Pooh</a></td><td>Bear</td><td>4</td>
        <tr><td><a class="cl" href="">Donald</a></td><td>Duck</td><td>7</td>
        <tr><td><a class="cl" href="">Jerry</a></td><td>Mouse</td><td>8</td>
      </table

</div>

调整窗口大小时，我希望水平滚动条显示在底部 <div>

链接到我的代码。

齐姆

只需将其包裹在一个table-responsive。这是有关Bootstrap中表响应的详细信息。

<div class="container">
    <div class="table-responsive">
      <table class="table table-striped table-bordered" style="width: 800px;">
        <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
        <tr><td><a class="cl" href="">Mickey</a></td><td>Mouse</td><td>5</td>
        <tr><td><a class="cl" href="">Tom</a></td><td>Cat</td><td>6</td>
        <tr><td><a class="cl" href="">Pooh</a></td><td>Bear</td><td>4</td>
        <tr><td><a class="cl" href="">Donald</a></td><td>Duck</td><td>7</td>
        <tr><td><a class="cl" href="">Jerry</a></td><td>Mouse</td><td>8</td>
       </table>
    </div>
</div>

演示：http：//codeply.com/go/XGV8aYFiZW

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。