All geek questions in one place

Scrolling the HTML table vertically and horizontally

I am looking to create a table of fixed width and height that can scroll vertically and horizontally.

I am looking for the first row to be a fixed heading, but also the first column to be fixed, and other columns can scroll to the right.

I can make the header work as such in approximately the following way:

http://www.cssplay.co.uk/menu/tablescroll.html

.. but how can I get the scroll columns with the first remaining fixed?

Any ideas?

+4
source share
1 answer

It will be a little easier if you work with a table with fixed proportions. Just create a DIV inside the column that you want to scroll vertically and give it fixed sizes to your liking and add the overflow-y: auto attribute to it. The verflow-y attribute will only show the scroll bar if the content of the div exceeds the visible area. Example:

<style type="text/css"> .scrollable { width:300px; height:400px; overflow-y:auto; overflow-x:hidden; clip-rect:(0px, 300px, 400px, 0px); } </style> <table width="500" height="500" cellpadding="0" cellspacing="0" border="0"> <tr height="100"> <td colspan="2">Banner</td> </tr> <tr height="400" valign="top"> <td width="200">Left Column</td> <td width="300"><div class="scrollable">Scrollable area<br><br><br><br><br><br><br><br><br><br><br>Scrollable area<br><br><br><br><br><br><br><br><br><br><br></div></td> </tr> </table>
+1
source

Source: https://habr.com/ru/post/1300165/

More articles:


All Articles