當表格水平滾動時，StickyHeaders是固定的

我有一個巨大的表格，裏面有大量的列，它被插入到一個div元素中，溢出屬性被設置爲auto。我正在使用StickyHeaders小部件（由@Mottie爲TableSorter插件的分支部件），並且無法使stickyHeaders與表格主體一起滾動。當表格水平滾動時，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?）不適合我。

來源

2014-09-04 Jake OS

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

來源

2014-09-04 12:41:20 Mottie

沒有多餘的變化我用第二溶液，由於去！ – 2014-09-08 13:03:39

當表格水平滾動時，StickyHeaders是固定的

回答

相關問題