Question

这里我想要用id为“datavaulttable”的表进行水平滚动我尝试使用overflow-x和display:block属性但是它不起作用，同时指定overflow-x属性我也设置了width属性像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">

你的表格代码来自带有类滚动菜单的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，则添加类

table-responsive

https://jsfiddle.net/fb7xLmx2/

overflow-x:scroll正在运作

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

3 个答案: