Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css - HTML table scrolling vertical & horizontal

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

I'm looking for the first row to be the fixed header, but also the first column to be fixed and the other columns to be able to scroll to the right.

I can get the header working as such by something like this:

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

..but how also could I get the columns scrolling with the first one remaining fixed?

Any ideas?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

This would be somewhat easy considering you are working with a table with fixed proportions. Simply create a DIV inside the column you'd like to scroll vertically and give it the fixed dimensions of your liking and append to it an 'overflow-y:auto' attribute. The verflow-y attribute will make sure only to present a scrollbar if the content of the div exceeds viewable 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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...