I want to make a grid by using HTML elements only that includes <table> and <div>.
Since the purpose for display only and my previous RadGrid is not working well in Firefox, thus i need draw a HTML Grid (div and table only) in Web Page.
My HTML grid is write like following codes :
<div id='divMain' style='overflow:auto' ..>
<div id='divTableHeader' style='overflow:hidden' ... >
<table id='ColumnTable'>
-- contain column name (eg: 10 columns)
</table>
</div>
<div id='divTableData' style='overflow:hidden' ...>
<table id='DataTable'>
--- contain the data (eg: 100 rows)
</table>
</div>
</div>
since those <div> has limited height and width , so when the Column Table is wider than div (divMain) ,the horizontal scroll bar of divMain will appear for me scroll the div to right hand side ~ I can scroll both divs(divHeader and divTableData) to right side..it work..
but when i wan the Vertical Scroll bar appear on divTableData because the table is higher than div(divMain),the vertical scroll bar is required to scroll to down ,but i only wan scroll down the DataTable only ,the Column Table should remain. it can simple ,but the scroll bar will add on right side , so i need scroll the bar (divMain) to right side ,then can see the vertical scroll bar of divTableData and scroll it to down ...
Maybe u all dont understand what i am talking about ?! however, i make make a html grid like this example...
http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html
when u enlarge the "commonName" column width ,the bottom scroll bar will appear ,u need move scroll bar to right to see more details. note , u can scroll the vertical scroll bar to down to see more row data ,,yes ,that is what i want ~
How i design this with <div> and <table> element.