我的 html 页面包含 3 个表格，我想水平滚动到其中一个答案

【问题标题】：My html page contains 3 tables I want horizontal scroll to one of them我的 html 页面包含 3 个表格，我想水平滚动到其中一个
【发布时间】：2017-03-08 05:48:15
【问题描述】：

在这里，我想要 ID 为“datavaulttable”的表格的水平滚动我已经尝试过使用overflow-x 和display:block 属性但它不起作用，同时指定overflow-x 属性我还设置了像width:200px 这样的宽度属性仍然它不工作。

 <body style="overflow-y: scroll; height: 100px">
        <div>
            <table id="tbluserfolder">
                <tr>
                    <td>
                        <button id="addbutton" class="btn"
                            style="background-color: lightgray" onclick="folderInfo()">
                            <img src="/BoardUI/img/plussign.jpg" height="50px" width="50px" />
                            Add Folder
                        </button>
                    </td>
                </tr>
            </table>
        <table class="foldertable table-bordered" id="datavaulttable" >
                <!-- 
                table-striped 
                <thead>

                    <tr>

                        <th>File</th>

                        <th>Created On</th>

                        <th>Created By</th>

                    </tr>
                </thead> -->

            </table>


            <table class="table table-striped table-bordered" id="fileinfo">


                <thead>

                    <tr>

                        <th>File</th>

                        <th>Created On</th>

                        <th>Created By</th>

                    </tr>
                </thead>

            </table>
        </div>
    </body>

【问题讨论】：

引导程序溢出表的工作原理是添加一个带有滚动溢出围绕表的包装器。 See Docs here
谢谢@haxxxton 我明白了你的意思，现在它在添加到 div 标签后工作了

标签： html css html-table horizontal-scrolling bootstrap-table

【解决方案1】：

i just added div tag , wrapped table with div

 <div style="overflow-x: scroll; width: 99%"> 
                <table class="table table-bordered" id="datavaulttable">
                    <!-- 
                table-striped 
                <thead>

                    <tr>

                        <th>File</th>

                        <th>Created On</th>

                        <th>Created By</th>

                    </tr>
                </thead> -->

                </table>
            </div>

【讨论】：

【解决方案2】：

如果你使用的是通过添加类来引导

table-responsive

https://jsfiddle.net/fb7xLmx2/

overflow-x:scroll 正在工作

【讨论】：

在下面发布了我的答案对我来说很好，感谢您添加信息也会尝试您的

【解决方案3】：

<div class="scrollmenu">

您的表格代码包含在带有类滚动菜单的 div 中。

【讨论】：

我在 div 中添加了 overflow-x 属性