Question

我有一个像这样固定宽度的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>

的底部

Link我的代码。

Answer 1

您有几个选择。

使用white-space:nowrap;和一些填充。

使用overflow: scroll;，它在底部添加了一个额外的滚动条，但修复了Firefox中的包装问题。

使用CSS overflow-y:scroll，仅受现代浏览器支持。

Answer 2

将其包裹在table-responsive中。这是details关于在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

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

2 个答案: