Saving specific row or column in HTML table fixed

Question

I have a huge amount of data filling HTML <table>with over 200 rows and 200 columns.

However, when I browse the page horizontally or vertically to view the data, the header columns (like th, for example) go beyond the page.

How to scroll the table and still hold the top row and leftmost column so that I always know what data I see.

Answer 1

Here is a good solution: http://www.imaputz.com/cssStuff/bigFourVersion.html

Although the implementation of JavaScript / jQuery solutions opens up a lot more doors.

. : HTML- ?

Answer 2

jQuery :

header: http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html

, -:  http://fixedheadertable.mmalek.com

: http://www.java2s.com/Code/HTMLCSS/Table-Style/Fixedtablefirstcolumn.htm

Answer 3

, .:)
tbody , : auto;:

CSS

tbody {
  max-height: 500px;
  max-width: 100%;
  overflow: auto;
}

HTML :

<table>
<thead>
<tr><th>headers</th></tr>
</thead>
<tbody>
<tr><td>body</td></tr>
</tbody>
<tfoot>
<tr><td>footers</td></tr>
</tfoot>
</table>