can a <tfoot> go at the bottom of a table?

问题

I'd like to use a <tfoot> tag in a table to be semantically correct, but it keeps showing up at the the top of my table. Is there a way to tell it to display at the bottom?

回答1:

According to the specification, you may place the tfoot before, or after, the tbody element(s). See the following description from the previous link.

Contexts in which this element can be used:

1. As a child of a table element, after any caption, colgroup, and thead elements and before any tbody and tr elements, but only if there are no other tfoot elements that are children of the table element.

2. As a child of a table element, after any caption, colgroup, thead, tbody, and tr elements, but only if there are no other tfoot elements that are children of the table element.

Regardless of where you place the markup, the footer information will be displayed at the bottom visually.

回答2:

As others have said, tfoot is defined before the tbody but rendered afterwards. This is by design and doesn't change the semantics (a table has a head, a foot and a body - the order of these doesn't matter)

The reason it's done this way is so that the foot can be loaded and displayed on screen while the body is still downloading, so you can still read the summary information you have in the foot. It's virtually moot these days, but with a slow connection and a massive table, you might still see the benefits.

回答3:

The <tfoot> can show on top of the whole <table> if the contents of the <tfoot> are not in <tr> and <td> tags and respectively - not in the table.

回答4:

Your table should look like the following:

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

with tfoot appearing above tbody. It will render, though, at the bottom of the table

回答5:

I am aware that this question was asked a while ago but I thought that I would add my experience of tfoot to the comments already made. When I added CSS "display:block" to the tfoot element, it appeared between thead and tbody, not at the bottom. When display:block was removed, it displayed correctly. I wasted some time working this one out, so I hope my answer will help someone else to save time and aggravation!

来源：https://stackoverflow.com/questions/2053925/can-a-tfoot-go-at-the-bottom-of-a-table