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

Как указано в спецификации W3 для таблиц:

Строки таблицы могут быть сгруппированы в 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;
}

Ответ 1

Недопустимая часть:

thead, tbody {
    display: block;
}

Демо

Ответ 2

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

Проблема с простой установкой элементов верхнего уровня (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/

а.

Ответ 3

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

table 
{
    background-color: #aaa;
}

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

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}

Ответ 4

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 */
}

Ответ 5

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

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

thead {
    display: inline-block;
}