如何在javascript中使表格可滚动

Question

我正在制作一个 div 并且点击 div 我正在制作一些表格。我正在获取表值。我希望我的表格可以滚动。

这是我的代码。

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

简单，有 fixed max-height， set overflow: auto，如果 table 高于 150px，就会出现滚动条。

thead,
tbody {
  display: block;
}

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

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