javascript - 如何为表格设置垂直和水平滚动条？

Question

我在 div 下有一个表格，我想根据该表格设置水平和垂直滚动条

我无法根据窗口大小设置垂直和水平滚动条，我想为我的表格设置滚动条，当表格超出窗口大小时，我应该能够使用滚动条浏览表格

这是代码-

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

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

             </div>

完整代码 - https://jsfiddle.net/gaurav10022/h7eqb209/12/

我希望表格滚动条根据窗口大小进行调整，即我的表格滚动条应该根据网页窗口大小进行调整。

标签： javascripthtml

Answer 1

添加表格的设置默认宽度并设置overflow:scroll为它，下面的工作示例，

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>