Question

我正在使用jquery库创建自定义滚动条-https://codepen.io/dragospaulpop/pen/asBcI

我创建了一个简单的示例，但关键是使表格填充到页面的其余部分（无需激活标准浏览器滚动条）。

我的代码是：

<head>
  <meta charset="UTF-8">
  <title>CSS Only Fixed Table Headers</title>
  <link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>

<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
    <thead>
        <tr>
            <th>Name</th><th>Color</th><th>Description</th>
        </tr>
    </thead>
    <tbody id="myBody">
    </tbody>
</table>     

<script>
    $(window).load(function(){

      $("#myBody").append("      <tr>        <td>Apple</td><td>Red</td><td>These are red.</td>      </tr>      <tr>        <td>Pear</td><td>Green</td><td>These are green.</td>      </tr>      <tr>        <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td>      </tr>      <tr>        <td>Orange</td><td>Orange</td><td>These are orange.</td>      </tr>      <tr>        <td>Banana</td><td>Yellow</td><td>These are yellow.</td>      </tr>      <tr>        <td>Kiwi</td><td>Green</td><td>These are green.</td>      </tr>      <tr>        <td>Plum</td><td>Purple</td><td>These are Purple</td>      </tr>      <tr>        <td>Watermelon</td><td>Red</td><td>These are red.</td>      </tr>      <tr>        <td>Tomato</td><td>Red</td><td>These are red.</td>      </tr>      <tr>        <td>Cherry</td><td>Red</td><td>These are red.</td>      </tr>      <tr>        <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td>      </tr>      <tr>        <td>Honeydew</td><td>Green</td><td>These are green inside.</td>      </tr>      <tr>        <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");

      $("tbody").mCustomScrollbar({
        theme:"light-3",
        scrollButtons:{
          enable:false
        },
        mouseWheel:{ preventDefault: true },
        scrollbarPosition: 'inside',
        autoExpandScrollbar:true,
        theme: 'dark'
      });
    });

</script>

<style>
    tbody {
      height: 150px;
      overflow: hidden;
      /*replace with auto to use default scroll*/
      /*overflow: auto;*/
    }
    .fixed_headers {
      table-layout: fixed;
      border-collapse: collapse;
      display: block;
      width: 100%;
    }
    .fixed_headers th {
      text-decoration: underline;
    }
    .fixed_headers th,
    .fixed_headers td {
      padding: 5px;
      text-align: left;
      box-sizing: border-box;
      display: inline-block;
      width: 33.33%;
    }
    .fixed_headers tr {
      display: block;
      width: 100%;
    }
    .fixed_headers thead {
      background-color: #333;
      color: #FDFDFD;
      display: block;
      width: 100%;
    }
    .fixed_headers tbody {
      display: block;
      width: 100%;
    }
    .fixed_headers tbody tr:nth-child(even) {
      background-color: #DDD;
    }

</style>
</body>

我要设置桌子的高度：page_height-red_div_height（页面的大小可以更改，因此可以是百分比）。因此，理想的解决方案是red_div始终具有相同的高度，但表的高度不是const（可以随窗口大小而变化）。

我试图通过从height: 150px;中删除tbody并将其放置在height: 100%;来更改css，但是结果是错误的-标准浏览器滚动条被激活，而不是自定义滚动条。然后，我尝试更改.fixed_headers tbody的CSS，但效果不佳。

如何解决这个问题？

是否有任何替代的jQuery插件可以允许：

仅滚动tbody

-动态添加tbody内容

-将元素（td，tr，tbody）的大小声明为百分比

-自动滚动编程（到初始位置）

带有自定义滚动条的jQuery表主体

0 个答案: