Может ли <tfoot> идти в нижней части таблицы?

Я бы хотел использовать тег <tfoot> в таблице, чтобы он был семантически корректным, но он продолжает отображаться в верхней части таблицы. Есть ли способ показать это внизу?

Ответ 1

В соответствии с спецификацией вы можете поместить элемент tfoot до или после tbody. См. Следующее описание из предыдущей ссылки.

Контексты, в которых этот элемент можно использовать:

Как дочерний элемент таблицы, после любых элементов заголовка, colgroup и thead и перед любыми tbody и tr элементами, но только если нет других элементов tfoot, которые являются дочерними элементами элемента таблицы.
Как дочерний элемент таблицы, после любых элементов заголовка, colgroup, thead, tbody и tr, но только если нет других элементов tfoot, которые являются дочерними элементами элемента таблицы.

Независимо от того, где вы размещаете разметку, информация нижнего колонтитула будет отображаться снизу визуально.

Ответ 2

Как говорили другие, tfoot определяется до tbody, но затем отображается впоследствии. Это по дизайну и не меняет семантики (таблица имеет голову, ногу и тело - порядок их не имеет значения)

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

Ответ 3

<tfoot> может отображаться поверх всего <table>, если содержимое <tfoot> не находится в тегах <tr> и <td> и, соответственно, не в таблице.

Ответ 4

Ваша таблица должна выглядеть так:

<table>
    <thead>...</thead>
    <tfoot>...</tfoot>
    <tbody>...</tbody>
</table>

с tfoot, появляющимся выше tbody. Это будет отображаться, однако, в нижней части таблицы

Ответ 5

Я знаю, что этот вопрос был задан некоторое время назад, но я подумал, что добавлю свой опыт tfoot к уже сделанным комментариям. Когда я добавил CSS "display: block" к элементу tfoot, он появился между thead и tbody, а не внизу. Когда дисплей: блок удален, он отображается правильно. Я потратил немного времени на это, поэтому я надеюсь, что мой ответ поможет кому-то еще сэкономить время и обострение!