如何将dataTables的水平滚动条放在桌面上？ [英] How to place the dataTables' horizontal scrollbar on top of the table?

查看：65
本文介绍了如何将dataTables的水平滚动条放在桌面上？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常大的数据表，我想把水平滚动条放在桌面的顶部和底部，这样用户就可以更容易地滚动（数据表有很多列）。有没有一种简单而恰当的方法来实现这一目标？

I have a really large datatable and I want to put the horizontal scrollbar on top as well as on the bottom of the table so it would be easier for the user to scroll (the datatable has a lot of columns). Is there an easy and proper way to achieve this?

推荐答案

您可以使用具有最大宽度的容器并放置表格内。

You can use a container that has a maximum width and put the table inside. 

<div class="large-table-container-1">
  <table>...</table>
</div>

根据您想要的可靠性，您可以：

Depending on how much reliability you want, you can make:

A.底部滚动条，只需设置最大宽度和溢出x滚动：

A. Bottom scrollbar, just set a maximum width and overflow x to scroll:

.large-table-container-1 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}

演示： 

.large-table-container-1 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-1 table {
  
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}

<div class="large-table-container-1">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>

B.顶部滚动条，有点hacky，使用180度变换将滚动条旋转到顶部，然后再旋转180度以放回内容。

B. Top scrollbar, a little hacky, use a 180 degree transform to rotate the scrollbar to the top, then again another 180 degree to put back the content.

.large-table-container-2 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
  transform:rotateX(180deg);
}

.large-table-container-2 table {
  transform:rotateX(180deg);
}

您可能希望使用特定于broswser的前缀进行转换，例如 -webkit-transform：rotateX（180deg）; 。

You may want to use broswser specific prefixes for transform, like -webkit-transform:rotateX(180deg);.

演示： 

.large-table-container-2 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
  transform:rotateX(180deg);
}
.large-table-container-2 table {
  transform:rotateX(180deg);
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}

<div class="large-table-container-2">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>

C。顶部和底部滚动条，多一点hacky。需要一些JavaScript。使用上面的解决方案表格A并为顶部滚动条添加'假'div：

C. Top and bottom scrollbar, a little more hacky. Needs some javascript. Use the solution form A above and add a 'fake' div for top scrollbar:

<div class="large-table-fake-top-scroll-container-3">
  <div>&nbsp;</div>
</div>
<div class="large-table-container-3">
  <table>...</table>
</div>


.large-table-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-3 table {

}
.large-table-fake-top-scroll-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
  background-color: red;/*Just for test, to see the 'fake' div*/
  font-size:1px;
  line-height:1px;
}

还有一个小javascript来捕捉顶部假div上的滚动然后滚动表容器（反之亦然），带有jQuery：

And a little javascript to catch the scroll on the top fake div and then scroll the table container (and vice-versa), with jQuery:

$(function() {
  var tableContainer = $(".large-table-container-3");
  var table = $(".large-table-container-3 table");
  var fakeContainer = $(".large-table-fake-top-scroll-container-3");
  var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");

  var tableWidth = table.width();
  fakeDiv.width(tableWidth);

  fakeContainer.scroll(function() {
tableContainer.scrollLeft(fakeContainer.scrollLeft());
  });
})

演示： 

$(function() {
  var tableContainer = $(".large-table-container-3");
  var table = $(".large-table-container-3 table");
  var fakeContainer = $(".large-table-fake-top-scroll-container-3");
  var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");

  var tableWidth = table.width();
  fakeDiv.width(tableWidth);
  
  fakeContainer.scroll(function() {
    tableContainer.scrollLeft(fakeContainer.scrollLeft());
  });
  tableContainer.scroll(function() {
    fakeContainer.scrollLeft(tableContainer.scrollLeft());
  });
})

.large-table-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-3 table {
  
}
.large-table-fake-top-scroll-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
  background-color: red;
  font-size:1px;
  line-height:1px;
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-table-fake-top-scroll-container-3">
  <div>&nbsp;</div>
</div>
<div class="large-table-container-3">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top and bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>

工作完成所有三种解决方案的代码：

The working complete code for all three solutions:

$(function() {
  var tableContainer = $(".large-table-container-3");
  var table = $(".large-table-container-3 table");
  var fakeContainer = $(".large-table-fake-top-scroll-container-3");
  var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");

  var tableWidth = table.width();
  fakeDiv.width(tableWidth);
  
  fakeContainer.scroll(function() {
    tableContainer.scrollLeft(fakeContainer.scrollLeft());
  });
  tableContainer.scroll(function() {
    fakeContainer.scrollLeft(tableContainer.scrollLeft());
  });
})

/*Bottom scrollbar*/
.large-table-container-1 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-1 table {
  
}

/*Top scrollbar*/
.large-table-container-2 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
  transform:rotateX(180deg);
}
.large-table-container-2 table {
  transform:rotateX(180deg);
}

/*Top and bottom scrollbar*/
.large-table-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-3 table {
  
}
.large-table-fake-top-scroll-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
  background-color: red;
  font-size:1px;
  line-height:1px;
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-table-container-1">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="large-table-container-2">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>


<div class="large-table-fake-top-scroll-container-3">
  <div>&nbsp;</div>
</div>
<div class="large-table-container-3">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top and bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>

这篇关于如何将dataTables的水平滚动条放在桌面上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆