How to set vertical and horizontal scrollbar for table?

Question

I have a table under div and i want to set horizontal and vertical scrollbar according to that table

I am unable to set vertical and horizontal scrollbar according to window size, I want to set scrollbar for my table, when the table goes out of window size then i should be able to go through the table by using scrollbar

here is the code-

            var $container = $("#container");
            var $button = $("<button>" + 'xyz' + "</button>");
            $container.prepend($button);
            var table = $("<table>");
            table.append($("<tr><th>column1</th><th>column2</th></tr>"));

           // Button click handler..
           $button.on("click", function(e) {
           e.preventDefault();
           for (var i = 0; i < 2; i++) {
           var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td> 
           </tr>');

           table.append(row);

           for (var j = 0; j < 2; j++) {

           var row = $('<tr><td>' + "" + '</td><td>' + 'data' + '</td> 
           </tr>');
           table.append(row);


          $("#table1").html(table);
          }}
          });

div content-

             <div id="container">
             <div id="table1">
             </div>

             </div>

full code- https://jsfiddle.net/gaurav10022/h7eqb209/12/

I want the table scrollbar to get adjust by window size, that is my table scrollbar should behave according to webpage window size.

Answer 1

Add set default width of table and set overflow:scroll to it, Working example below,

 var $container = $("#container"); // Loop through items in JSON data.. var $button = $("<button>" + 'xyz' + "</button>"); $container.prepend($button); var table = $("<table>"); table.append($("<tr><th>column1</th><th>column2</th></tr>")); // Button click handler.. $button.on("click", function(e) { e.preventDefault(); for (var i = 0; i < 2; i++) { // Replace row HTML.. //parent row var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td></tr>'); table.append(row); for (var j = 0; j < 2; j++) { //child row var row = $('<tr><td>' + "" + '</td><td>' + 'data' + '</td></tr>'); table.append(row); $("#table1").html(table); }} }); // Show table if it's not already visible..

 #table2 { margin-top: 20px; border-collapse: collapse; } #container{ height:300px; overflow:scroll; width:150px; } #table1 { margin-top: 20px; border-collapse: collapse; } #table1 th { //border: 1px solid black; text-align: left; } #table1 td { //border: 1px solid black; text-align: left; } #table1 tr { background-color: #f2f2f2; } #table2 th { //border: 1px solid black; text-align: left; } #table2 td { //border: 1px solid black; text-align: left; } #table2 tr { background-color: #f2f2f2; } button { margin-left: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="table1"> </div> </div>