Как сделать так, чтобы колонки с плавающим заголовком прокручивались горизонтально и не позволяли им выравниваться по левому краю? - PullRequest
Новая
       2

Как сделать так, чтобы колонки с плавающим заголовком прокручивались горизонтально и не позволяли им выравниваться по левому краю?

0 голосов
/ 14 сентября 2011

У меня есть HTML-таблица, которая всегда показывает заголовки столбцов, когда пользователь прокручивает окна. Работает нормально, но заголовок (thead) всегда выровнен по левому краю; когда таблица узкая и центрированная, столбцы больше не соответствуют столбцам заголовка. Это также происходит, когда таблица очень широкая и имеет много столбцов, что приводит к появлению горизонтальной прокрутки; заголовок не прокручивается, и всегда отображаются первые столбцы.

JavaScript: 

function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#main_table").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom)
{
    clone_table = $("#clone");
    if(clone_table.length == 0)
    {
        clone_table = $("#main_table").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed', 'pointer-events': 'none', top: 0});
        clone_table.width($("#main_table").width());
        $("#table_container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({visibility:'visible'});
    }
}
else
{
    $("#clone").remove();
}
}
$("#main_table").wrap('<div id="table_container"></div>');
$('<div id="bottom_anchor"></div>').insertAfter('#main_table');
$(window).scroll(moveScroll);

HTML: 

<table id="main_table" align="center">
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
    </tr>
    </thead>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
</table>

CSS: 

body {
    width: 500px;
}
thead tr {
    background-color: lightgrey;
}

Как я могу это исправить?

Предварительный просмотр проблема горизонтальной прокрутки

Предварительный просмотр узкий центрированный стол - решено

1 Ответ

2 голосов
/ 14 сентября 2011

http://jsfiddle.net/AvaUU/7/

Добавить в: 

.css({
    position: 'fixed',
    'pointer-events': 'none',
    left: $("#main_table").offset().left+'px',
    top: 0
})

(О, и я связал большую часть вашего jQuery вместе, просто потому, что мне нравится, как это выглядит.)

...