Question

我有这样的表：http://jsfiddle.net/A34tH/1/

             <table id="fixed_hdr2">
       <thead>
       <tr>
       <th colspan="5" rowspan="2"></th>
       <th colspan="31">december</th></tr>
        <tr>
                  <th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th>        <th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th> 
    </tr>   
                 <tr>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>02</th><th>03</th><th>04</th><th>05</th><th>06</th><th>07</th><th>09</th><th>10</th>        <th>11</th><th>12</th><th>13</th><th>14</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th>    <th>30</th><th>31</th> 
        </tr>   
    </thead>
[...]
    <table>

我需要看到前3行和5列始终可见。真实表更大（更多行和列）。当您滚动这样大的表时，您无法控制标题（左侧和顶部），因此使用表格非常糟糕。尝试了很多修复标题的解决方案（上图）。它们都没有在我的桌子上正常工作（我认为问题在于colspan和rowspan。它们中的一些几乎起作用但是标题被移动了。

有谁知道控制表头的任何解决方案？我没有想法。

测试：

Answer 1

有几种方法可以做到这一点。第一个是在CSS / HTML中将其转换为三个表而不是一个。第二个是使用某种类型的插件（没看过，但我认为有一个）。假设您不想执行其中任何一项，您也可以使用javascript / jQuery来执行此操作

我的方法建立在this approach上，以保持标题和标签的固定

var numDays = 31, // Days of the months in the table
    // Get all header cells
    $headerCells = $('thead tr th'), 
    // Get all label cells
    $labelCells = $('tbody tr td:nth-child(-n + 5):not([colspan]), tbody tr [colspan="5"]'), 
    // Get all body cells
    $bodyCells = $('tbody tr td:nth-child(n + 5), tbody tr [colspan="' + (numDays - 5) + '"]');

$bodyCells.each(function() { // Give each body cell `position:absolute`
    absoluteIt($(this));    
});                   
$headerCells.each(function() { // Give each header cell `position:fixed`
    fixIt($(this));
    $(this).css('z-index', '2'); // When scrolled, place over the other table cells
});
$labelCells.each(function() { // Give each label cell `position:fixed`
    fixIt($(this));
    $(this).css('z-index', '1'); // When scrolled, place over tbody cells
});

$(window).scroll(function(){ // Compensate for scrolling
    // Get scroll positions
    var sLeft = - $('body').scrollLeft(), sTop = - $('body').scrollTop();
    $headerCells.each(function() { // Only scroll horizontally
        $(this).css({
            'left':sLeft + $(this).data('origPosition').oLeft
        });
    });
    $labelCells.each(function() { // Only scroll vertically
        $(this).css({
            'top': sTop + $(this).data('origPosition').oTop
        });
    });        
});


function fixIt($elem) { // Changes the given element into `position:fixed`
    $elem.data('origPosition', { // Saves original values in a data attribute for later
        oTop: $elem.offset().top, 
        oLeft: $elem.offset().left,
        oWidth: $elem.width(),
        oHeight: $elem.height()
    });

    setTimeout(function() { // Necessary to force after the `.data`
        $elem.css({ // Fix the element and make sure it looks like it did before
            position: 'fixed',
            top: $elem.data('origPosition').oTop,
            left: $elem.data('origPosition').oLeft,
            width: $elem.data('origPosition').oWidth,
            height: $elem.data('origPosition').oHeight
        });
    }, 0);
}
// I tried using the same function as above and changing the position afterwards
// but it didn't work out very well
function absoluteIt($elem) { // Changes the given element into `position:absolute`
    $elem.data('origPosition', { // Saves original values in a data attribute for later
        oTop: $elem.offset().top, 
        oLeft: $elem.offset().left,
        oWidth: $elem.width(),
        oHeight: $elem.height()
    });

    setTimeout(function() { // Necessary to force after the `.data`
        $elem.css({ // Absolutely position the element and make sure it looks like it did before
            position: 'absolute',
            top: $elem.data('origPosition').oTop,
            left: $elem.data('origPosition').oLeft,
            width: $elem.data('origPosition').oWidth,
            height: $elem.data('origPosition').oHeight
        });
    }, 0);
}

Demo

我的演示假设整个标签占据了colspan的5 This question/answers。如果您需要更多动态结果，因为它使用自定义{{{}} 1}}各种

Here is another version将表（带有一些修改）放在容器中。它利用了一种伪固定位置。此版本中的重大更改：nth-col容器具有任意宽度/高度，将以下CSS添加到div：table

如果您有任何问题，请告诉我

大表导航 - 如何控制标题

1 个答案: