javascript - 如何在表格顶部放置滚动条？

Question

我有一张很宽的桌子，可以在普通显示器上完全显示。有没有办法在表（或容器）顶部暗示滚动条div？就像在话语用户表中一样。

HTML

<div id="table_div">
    <table id="myTable">
       //content goes here           
    </table>
</div>

CSS

#table_div {
overflow-x: auto;
float: left;
width: 90%;
margin-left: 5%;
}

#myTable {
height: auto;
background-color: white;
border-collapse: collapse;
text-align: center;
border: 1px solid #ddd;
font-size: 16px;
width: 1305px;
}

标签： javascripthtmljquerycss

Answer 1

您可以使用 CSS transform: rotateX()。这将旋转#table_div并且滚动条将出现在表格的顶部。

#table_div {
  overflow-x: auto;
  float: left;
  width: 90%;
  margin-left: 5%;
  transform: rotateX(180deg);
}

#myTable td {
  height: auto;
  background-color: white;
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 16px;
  width: 1305px;
  transform: rotateX(180deg);
}

<div id="table_div">
  <table id="myTable">
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </table>
</div>