具有固定标题的水平和垂直可滚动内容

Question

我有一个带动态宽度的内容div（它将自身调整为窗口宽度）。在这个div我有两个表比我的包装div的视口更宽。因此，包装器应该是水平可滚动的。 div也有一个固定的高度，这意味着一切都应该是垂直可滚动的！只是标题应该保持在顶部，但也可以与内容表一起水平滚动。

<div class="wrapper">
    <table width="2000" class="fixed"><tr></tr></table>
    <table width="2000"><tr></tr></table>
</div>

这是演示我的问题的小提琴：jsFiddle

Answer 1

演示： http://jsfiddle.net/techsin/pDhmy/4/

标题宽度更改： http://jsfiddle.net/techsin/pDhmy/8/

执行此操作的代码

$('.mega').on('scroll',function(){$('.header').css('top',$(this).scrollTop());});

和....

.header{position:absolute; background-color:rgb(202, 202, 202);}

.header+* {margin-top:30px;}

Answer 2

粘性表标题

DEMO： http://jsfiddle.net/gvee/kJ9xp/

HTML

<table>
    <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </thead>
    <tr class="sticky-header">
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>

    ... etc ...

</table>

CSS

* {
    margin: 0;
    border: 0;
    padding:0;
}

table {
    border-collapse: collapse;
    margin: 10px;
}

th, td {
    width: 50px;
    height: 50px;
    background-color: #eee;
    text-align: center;
    border: 1px solid #ddd;
}

.sticky-header {
    display: none;
    position: fixed;
    top: 0px;
}
.sticky-header th {
    background-color: red;
}

JQuery的

var thead = $('thead');
var th = $('.sticky-header');
var t = $('table');

$(document).scroll(function() {
    if ($(this).scrollTop() >= thead.offset().top && $(this).scrollTop() < t.offset().top + t.height() - th.height())
    {
        th.show();
    } else {
        th.hide();
    }
});