如何在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;
}

有任何方法可以继续进行吗？

- David

Answer 1

如果表格高度超过150px，可以通过固定的max-height和设置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;
}

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

- Dalin Huang

---

@David 很高兴能帮助你。 - Dalin Huang

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

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

- AliRıza Adıyahşi

---

谢谢你的回答 :) - David