html – 如何在响应表中保持水平滚动条可见?

我有一个包含大量行的表,这会导致引导程序“响应表”,滚动条离开屏幕底部.要查看溢出到两侧的数据,您必须滚动到底部,移动滚动条,然后再次向上滚动.

看看这个小提琴,http://jsfiddle.net/Lq4uk/1/

这是HTML代码,

<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
    <th>#</th>
    <th>Header 1</th>
    ... (bunch of headers)
</thead>
<tbody>
    <tr>
        <th>1</th>
        <th>Some long text to make this overflow</th>
        ... (bunch of cells)
    </tr>
    ... (lots more rows)
</tbody>
</table>

如何使水平滚动条始终可见?

或者,以不同的方式看待它,如何使用屏幕上可用的最大空间量来表格的垂直尺寸?

解决方法

您可以使用包装div .table-responsive来显示滚动条:

>给它一个高度(百分比与否)
>将它的溢出设置为auto

DEMO

CSS:

body,html{
    height:100%;
}

.table-responsive{
    width:100%;
    height:100%;
    overflow:auto;
}

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些