Dynamic is something which changes depending on Environment. Here height and
width will change according to System. i.e., it will change its height and width
depending on System height and width.
Hundreds of monitors available with different dimensions. Few will have 1024 * 800 and few others 1200*1024. Things which works perfectly in 1024* 800 will not work perfectly in 1200*1024.
So everyone wants some thing dynamic which should change depending on monitor width and height. Here is something which does that function for you.
So everyone wants some thing dynamic which should change depending on monitor width and height. Here is something which does that function for you.
In the below script you just need to width, If you specify 100 it
means 100% if
you specify 50 it means 50%.
- It does not use CSS Hacks
- divHeight will represent the Div Height.
- divWidth will represent the Div Width.
- Cell width is calculated by dividing Div Width with number of columns
<script>
var divHeight= 50;
var divWidth= 50;
</script>
Advantages from previous version:
- Works fine in Chrome. Google Chrome uses CSS2 new version when compared to other browser. So few things does not work fine in Chrome.
- Width and Height is configurable. If you want table to cover 50% of screen just specify 50 to DivHeight and DivWidth variables.
- If you add below code to first version it works fine in Chrome and FF.
<script>
var divHeight= 40;
var divWidth= 60;
var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1;
var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1;
divWidth= (divWidth * 0.01 * screen.width - 20);
divHeight= (divHeight * 0.01 * screen.height);
document.getElementById('ScrollTableDS').style.height = divHeight;
document.getElementById('ScrollTableDS').style.width = divWidth;
var rows = document.getElementById('TableDS').getElementsByTagName('tr');
for(var i =0; i< rows.length; i++){
var cols = rows[i].getElementsByTagName('td');
var divWd = divWidth/cols.length;
for(j=0; j< cols.length; j++){
cols[j].setAttribute("width", divWd);
}
}
if(isChrome){
document.getElementById('scrollBodyDS').style.display ="block";
document.getElementById('TableDS').tHead.style.display ="block";
document.getElementById('TableDS').tFoot.style.display ="block";
document.getElementById('ScrollTableDS').style.width = divWidth;
}
if(!isIE){
//extra column for header
rows = document.getElementById('TableDS').tHead.getElementsByTagName('tr');
for(var i=0; i < rows.length; i++){
var cols = rows[i].getElementsByTagName('td');
var tcell1 = rows[i].insertCell(cols.length);
tcell1.setAttribute("width", "17px");
}
//extra column for footer
rows = document.getElementById('TableDS').tFoot.getElementsByTagName('tr');
for(var i=0; i < rows.length; i++){
var cols = rows[i].getElementsByTagName('td');
var tcell1 = rows[i].insertCell(cols.length);
tcell1.setAttribute("width", "17px");
}
var bRows=0;
bRows = bRows + document.getElementById('TableDS').tFoot.offsetHeight + document.getElementById('TableDS').tHead.offsetHeight +5;
bRows = divHeight - bRows;
document.getElementById('scrollBodyDS').style.height = bRows;
document.getElementById('scrollBodyDS').style.overflow ="AUTO";
document.getElementById('ScrollTableDS').style.overflow ="hidden";
}
</script>
| First Column | Second Column | Third Column | Fourth Column | Fifth Column | Sixth Column | Seventh Column | Ninth Column |
| 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
| 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 |
| 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 |
| 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 |
| 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 |
| 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 |
| 10 | 0 | 0 | 0 | 0 | 0 | 0 | 10 |
| 11 | 1 | 1 | 1 | 1 | 1 | 1 | 11 |
| 12 | 2 | 2 | 2 | 2 | 2 | 2 | 12 |
| 13 | 3 | 3 | 3 | 3 | 3 | 3 | 13 |
| 14 | 4 | 4 | 4 | 4 | 4 | 4 | 14 |
| 15 | 5 | 5 | 5 | 5 | 5 | 5 | 15 |
| First Column | Second Column | Third Column | Fourth Column | Fifth Column | Sixth Column | Seventh Column | Ninth Column |
