может ли <tfoot>идти внизу таблицы?

Question

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

Answer 1

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

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

Answer 2

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

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

1. В качестве дочернего элемента элемента таблицы, после любых элементов caption, colgroup и thead и перед любыми элементами tbody и tr, но только в том случае, если нет других элементов tfoot, являющихся дочерними элементами элемента table. *

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

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

Answer 3

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

Answer 4

Ваша таблица должна выглядеть следующим образом:

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

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

Answer 5

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