Как прокрутить таблицу " tbody "независимо от"thead"?

как указано здесь:

строки таблицы могут быть сгруппированы в голове таблицы, ноге таблицы, и один или дополнительные разделы тела таблицы с использованием элементов THEAD, TFOOT и TBODY, соответственно. Это подразделение позволяет агентам пользователей поддерживать прокрутку тела таблицы независимо от головы и ноги таблицы.

Я создал пример, но это не работа.

HTML:

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS:

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});

CSS:

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
5 56
javascript html css

5 ответов:

недостающая часть:

thead, tbody {
    display: block;
}

демо

46

Я видел этот пост около месяца назад, когда у меня возникли похожие проблемы. Мне нужна была прокрутка по оси y для таблицы внутри диалогового окна пользовательского интерфейса (да, вы меня правильно поняли). Мне повезло, что рабочее решение представилось достаточно быстро. Тем не менее, это было незадолго до того, как решение приняло свою собственную жизнь, но об этом позже.

проблема с просто установкой элементов верхнего уровня (thead, tfoot и tbody) для отображения блока заключается в том, что синхронизация браузера столбца размеры между различными компонентами быстро теряются и все упаковывается до наименьшего допустимого размера. Установка ширины столбцов кажется лучшим способом действия, но без установки ширины всех внутренних компонентов таблицы, чтобы соответствовать общему количеству этих столбцов, даже с фиксированной компоновкой таблицы, есть небольшое расхождение между заголовками и телом, когда присутствует полоса прокрутки.

решение для меня было установить все ширины, проверить, если полоса прокрутки была представьте, а затем возьмите масштабированные ширины, которые браузер фактически решил, и скопируйте их в верхний и Нижний колонтитулы, регулируя ширину последнего столбца для размера полосы прокрутки. Это обеспечивает некоторую текучесть ширины столбцов. Если происходят изменения ширины таблицы, большинство основных браузеров будут автоматически масштабировать ширину столбцов tbody соответственно. Все, что осталось, это установить ширину столбцов верхнего и нижнего колонтитулов из их соответствующих размеров тела.

$table.find("> thead,> tfoot").find("> tr:first-child")
    .each(function(i,e) {
        $(e).children().each(function(i,e) {
            if (i != column_scaled_widths.length - 1) {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
            } else {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
            }
        });
    });

этот огурчик иллюстрирует эти понятия: http://jsfiddle.net/borgboyone/gbkbhngq/.

обратите внимание, что обертка таблицы или дополнительные таблицы не нужны для прокрутки по оси y в одиночку. (Для прокрутки по оси X требуется таблица обертывания.) Синхронизация между размерами столбцов для тела и заголовка по-прежнему будет потеряна, если будет обнаружен минимальный размер пакета для столбцов заголовка или тела. Механизм минимальной ширины должен быть предусмотрен, если изменение размера является опцией или небольшой таблицей ожидается увеличение ширины.

конечная кульминация от этой отправной точки полностью реализована здесь:http://borgboyone.github.io/jquery-ui-table/

A.

1

попробуйте это.

table 
{
    background-color: #aaa;
}

tbody 
{
    background-color: #ddd;
    height: 100px;
    overflow-y: scroll;
    position: absolute;
}

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}
1
thead {
  position: fixed;
  height: 10px; /* This is whatever height you want */
}
  tbody {
  position: fixed;
  margin-top: 10px; /* This has to match the height of thead */
  height: 300px; /* This is whatever height you want */
}
0

обязательных частей:

tbody {
    overflow-y: scroll;  (could be: 'overflow: scroll' for the two axes)
    display: block;
    with: xxx (a number or 100%)
}

thead {
    display: inline-block;
}
0