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

Question

这里我想要 table 和 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>

Answer 1

<div class="scrollmenu">

您的 table 代码位于带有 class 滚动菜单的 div 中。

Answer 2

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>

Answer 3

如果您使用 bootstrap 通过添加 class

table-responsive

https://jsfiddle.net/fb7xLmx2/

overflow-x:scroll 正在工作

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

My html page contains 3 tables I want horizontal scroll to one of them

html

css

html-table

horizontal-scrolling

bootstrap-table