如何在javascript中使表格可滚动

Question

我正在做一个div和div的onclick我正在做一些表。 我正在获取表值。 我希望我的桌子可以滚动。

这是我的代码。

var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">'+
            '<table id="myTable">'+ '<tr class="header"></tr>' + '<tr><td></td></tr>'+ '</table>';

我正在从某些代理获取此表数据。 我希望表的大小应该受到限制，如果数据更多，则应滚动显示。

我在这里应用的CSS是

#myInput {
  background-image: url('Drop.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

任何进行此操作的方法。

Answer 1

简单，使用固定的max-height ，将overflow: auto设置为overflow: auto ，如果表格大于150px，将显示滚动条。

thead,
tbody {
  display: block;
}

tbody {
  height: 150px;
  overflow: auto;
}

 thead, tbody { display: block; } tbody { max-height: 150px; overflow: auto; } #myInput { background-image: url('Drop.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 30%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } 

 <input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name"> <table id="myTable"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> 

Answer 2

#myTable
{
    width: 200px;
    height: 400px;
    overflow: auto;
}

或带有固定标题的表

tbody {
    width: 200px;
    height: 400px;
    overflow: auto;
}

这可能不适用于某些版本的IE。 如果要使用所有浏览器，则可以进入表div并设置其height和overflow属性。

var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">'+
        '<div class="scrollable"><table id="myTable">'+ '<tr class="header"></tr>' + '<tr><td></td></tr>'+ '</table></div>';

和CSS

.scrollable
{
    width: 200px;
    height: 400px;
    overflow: auto;
}

有很多解决方案。 您还可以定义嵌套表，或者如果需要，可以仅应用滚动行，等等。