javascript - 当表格可以水平滚动时，StickyHeaders 是固定的

我有一个包含大量列的巨大表格，它被插入到一个溢出属性设置为 auto 的 div 元素中。我正在使用 StickyHeaders 小部件(@Mottie 的 TableSorter 插件 fork 的小部件)并且无法使 stickyHeaders 随表体滚动。

HTML

<div style="overflow-y:auto">
  <table class="tablesorter">
    <thead>
    <tr>
        <th>Row ID</th>
        <th>AlphaNumeric</th>
        <th>Numeric</th>
        <th>Numeric</th>
        <th>Numeric</th>
        <th>Numeric</th>
        <th>Numeric</th>
        <th>Numeric</th>
        <th>Animals</th>
        <th>Sites</th>
    </tr>
   </thead>
   <tbody>
    <tr>
        <td>row1</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row2</td>
        <td>abc 1</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>row3</td>
        <td>abc 9</td>
        <td>10</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>row5</td>
        <td>abc 11</td>
        <td>3</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>row6</td>
        <td>abc 2</td>
        <td>56</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>row8</td>
        <td>ABC 10</td>
        <td>87</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row9</td>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>zyx 12</td>
        <td>0</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row2</td>
        <td>abc 1</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>row3</td>
        <td>abc 9</td>
        <td>10</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>row5</td>
        <td>abc 11</td>
        <td>3</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>row6</td>
        <td>abc 2</td>
        <td>56</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>row8</td>
        <td>ABC 10</td>
        <td>87</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row9</td>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>zyx 12</td>
        <td>0</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row2</td>
        <td>abc 1</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>row3</td>
        <td>abc 9</td>
        <td>10</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>row5</td>
        <td>abc 11</td>
        <td>3</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>row6</td>
        <td>abc 2</td>
        <td>56</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>row8</td>
        <td>ABC 10</td>
        <td>87</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row9</td>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>zyx 12</td>
        <td>0</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row2</td>
        <td>abc 1</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>row3</td>
        <td>abc 9</td>
        <td>10</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>row5</td>
        <td>abc 11</td>
        <td>3</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>row6</td>
        <td>abc 2</td>
        <td>56</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>row8</td>
        <td>ABC 10</td>
        <td>87</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row9</td>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>zyx 12</td>
        <td>0</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row2</td>
        <td>abc 1</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>row3</td>
        <td>abc 9</td>
        <td>10</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>row5</td>
        <td>abc 11</td>
        <td>3</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>row6</td>
        <td>abc 2</td>
        <td>56</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>row8</td>
        <td>ABC 10</td>
        <td>87</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row9</td>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>zyx 12</td>
        <td>0</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row2</td>
        <td>abc 1</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>row3</td>
        <td>abc 9</td>
        <td>10</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>row5</td>
        <td>abc 11</td>
        <td>3</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>row6</td>
        <td>abc 2</td>
        <td>56</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>row8</td>
        <td>ABC 10</td>
        <td>87</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>row9</td>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>zyx 12</td>
        <td>0</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>234</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
   </tbody>
   </table>
 <div>

JS 代码

$('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
    usNumberFormat: false,
    sortReset: true,
    sortRestart: true
});

为了演示这个问题，我把它放到了 jsfiddle 中。向下滚动表格，然后水平滚动。问题演示:http://jsfiddle.net/0088y5ba/4/

同样的问题 ( How to use tablesorter stickyheaders widget - not working? ) 对我不起作用。

最佳答案

There is an issue当 stickyHeaders 表包含在没有设置高度的 div 中时，我只是没有时间处理它。

一种解决方案是向 div 包装器添加高度 ( demo )

HTML

<div class="wrapper">
    <table class="tablesorter">
    ...
    </table>
<div>

CSS

.wrapper {
  position: relative;
  padding: 0 5px;
  height: 350px;
  overflow-y: auto;
}

脚本

$('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
    widgetOptions: {
        stickyHeaders_attachTo: $('.wrapper')
    },
    usNumberFormat: false,
    sortReset: true,
    sortRestart: true
});

如果您的用户群支持，第二种解决方案是使用 cssStickyHeaders widget不需要额外更改的地方 ( demo )

$('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columns', 'cssStickyHeaders', 'filter'],
    usNumberFormat: false,
    sortReset: true,
    sortRestart: true
});

关于javascript - 当表格可以水平滚动时，StickyHeaders 是固定的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25658326/

javascript - 当表格可以水平滚动时，StickyHeaders 是固定的

上一篇：html - 我想在 jmeter 中忽略带有正则表达式的空格

下一篇：javascript - 在什么情况下我们必须使用本地存储而不是cookies？