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

javascript html css

107295 просмотра

5 ответа

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

Строки таблицы могут быть сгруппированы в голове столик, стол ногой, и один или несколько разделов таблицы тела, используя 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;
}
Автор: Misha Moroshko Источник Размещён: 06.07.2019 01:07

Ответы (5)


46 плюса

Решение

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

thead, tbody {
    display: block;
}

демонстрация

Автор: bookcasey Размещён: 30.11.2011 06:29

1 плюс

Я видел этот пост около месяца назад, когда у меня были похожие проблемы. Мне нужно было прокрутить по оси 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.

Автор: Borgboy Размещён: 27.11.2014 12:17

1 плюс

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

table 
{
    background-color: #aaa;
}

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

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}
Автор: Bhimbim Размещён: 07.04.2016 05:25

0 плюса

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 */
}
Автор: John K. Chow Размещён: 24.05.2013 06:07

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;
}
Автор: freignat Размещён: 16.05.2017 08:00
32x32