CODEWITHSUNDEEP
htmlcss
124697
124697

Reputation: 21893

How can I scroll through the body of a table without having the header of the table move?

I would like to have my tbody be scrollable, while at the same time having the thead stay static. This is the code that I tried, but it doesn't work

tbody {
  height: 200px;
  overflow: auto
}

I have also tried using overflow:scroll; but that doesn't work either

Upvotes: 1

Views: 5064

Answers (2)

Jimothy
Jimothy

Reputation: 9730

There are some pure CSS and HTML hacks, but they use things like nested tables, or divs nested in tables, or tables nested in divs, or using spans instead of th cells. That is, your table no longer looks like a table.

My advice: Use one of the many jQuery plugins that'll let you code your table as a table, and hide the hacks away from you. DataTables can do this, as well as many other handy features (such as sortable columns, a search field, re-orderable columns, etc.).

You can also use the FixedHeader plugin without the rest of the DataTables features, as shown in this example. This has an interesting twist: The height of the table remains dynamic, yet the column names will always display at the top of the page as you scroll the entire page. You don't have to do it that way; you can have a fixed table height with fixed header and footer, as shown in the first example I linked to.

Upvotes: 0

DOK
DOK

Reputation: 32841

Check out the answers at I need my html table's body to scroll and its head to stay put

According to one of the commenters there, this may be the most universal solution.

The general concept is to put the headers into <thead> tags, and to set overflow: auto to make scrollbars appear when needed (or overflow: scroll to have them always appear).

Upvotes: 2

Related Questions