it-roy-ru.com

Как прокрутить "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;
}
56
Misha Moroshko

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

thead, tbody {
    display: block;
}

Демо

46
bookcasey

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

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

table 
{
    background-color: #aaa;
}

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

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

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

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
freignat
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
John K. Chow