We might have come across many situations to change the table structure dynamically according to the screen resolution the user has. This can be achieved in many ways. I will discuss here some of the ways which I have worked out.
This material considers that the user will be using Tables in their pages. If not then it can be achieved using the Layers (DIV).
The first and easiest step is setting the width of the element to 100%. This is the easiest way to dynamically change the size of the user interface. For example
<Table width=100% border=0> . . </Table>and setting the width of the inner elements in Ratio (%) instead of setting it with Fixed values (Pts Points or Pxs - Pixels). So what happens is it will fit the screen to the work area, so that even if the user changed his screen resolution the page will fit to that.
The problem is, if the user resizes the browser it will mess up the alignment of the table and display the information improperly, when the screen size is lesser.
So to avoid this, we can use the other approach. In this approach we will find the users Screen width and accordingly set the Width of the table. It will not collide though the browser is resized. The code sample is provided below,
. <script language=javascript> function ResizeTable(){ var objTable = document.getElementById(tableid) ; objTable.style.width = screen.width + px; } </script> <body onLoad= ResizeTable();> <table id=tableid> </table> </body> </html>This will fit the table width to the resolution the user sets and will avoid the misalignments that occur within the table even if the browser resizes. Hope this will be helpful to everyone.
