Question

我正在制作一个div和onclick of 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

简单，固定max-height，设置overflow: auto，如果表格高于150像素，则会显示滚动条。

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

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

如何在javascript中使表格可滚动

2 个答案: