Search code examples
htmlcsshtml-tablehorizontal-scrollingbootstrap-table

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


Here I want horizontal scroll for table with id "datavaulttable" I have tried with overflow-x and display:block property but it is not working, while specifying overflow-x property I also set width property like width:200px still it not working.


 <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>

Solution

  • 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>