Allowing elements to scroll inside a browser viewport is generally a bad design decision: users are likely to confuse the scrollbars on the inner element and the browser viewport, slowing speed and usability.
However there are rare occasions when scrolling might be considered for HTML elements. One such scenario is a shopping table, in which products or services with small but important distinctions are presented in rows.
In a future article, I’ll show you how to use JQuery to “stick” ; rows in the table, allowing easy comparison between products. In this section, I’ll present the markup and CSS for the table.
The code is fairly straightforward: a table header section (
<thead>) with column headings, table body (
<tbody>) containing the table data (different computer processors, in this case) and a table footer (
<tfoot>). Rather oddly, the table footer is placed before the body in the code, but automatically appears underneath it in the browser. In this example, there is no data in the table footer, and its role is purely presentational.
Read more about Scrolling, Fade-in Table