I am using JSP and Html table tags in my pages and I have scriplets to execute java codes inside my jsp pages. I dynamically populates the Table data in UI from the DB, based on conditions, and there are almost 15 columns. [in future, more columns to be added]
I want the Table to be fixed as per browser's context size and there should be a Horizontal scroller beneath the table to scroll the additional columns.
I followed these links: Add horizontal scrollbar to html table
Table scroll with HTML and CSS
And i used <div>
to wrap the Table and used below piece of CSS code:
div .clsTableDiv
{
width: 500px;
height: 110px;
overflow-x: scroll;
overflow-x: auto;
overflow-y: hidden;
}
Also I tried to put overflow
style directly to the Table, like:
<table class="clsTable" cellspacing="1" cellpadding="3" border="0" style="overflow-x: scroll; display: block; width: 500px; height: 110px;">
</table>
But somehow the scroller isn't working at all. I am not sure if I'm mistaking something or it's the scriplet that I used in JSp to populate data dynamically in the table, is preventing it. Please suggest me on this.