| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/_work/ |
Upload File : |
<!DOCTYPE html>
<html>
<head><title>testdoc</title>
<?
$cellPadding = 2;
$studentIdWidth = 90 - ( 2 * $cellPadding );
$studentNameWidth = 140 - ( 2 * $cellPadding );
$headcolWidth = $studentIdWidth + $studentNameWidth + ( 4 * $cellPadding );
$tableWidth = 2000;
$minusWidth = 50;
$leftPosition = $minusWidth + ( 2 * $cellPadding );
$columnWidth = 45;
?>
<style type="text/css">
table.scroll { border-collapse:collapse; }
.scroll td { white-space:nowrap; }
div.scroll { width: <?=$tableWidth?>px; overflow-x:scroll; margin-left:<?=$headcolWidth?>px; overflow-y:visible; padding-bottom:20px; }
.headcol { position:absolute; width:<?=$headcolWidth?>px; left:<?=$leftPosition?>px; top:auto; background-color:#00FF00; }
.sIdCol { float:left; width:<?=$studentIdWidth?>px; padding-left:<?=$cellPadding?>px; padding-right:<?=$cellPadding?>px; }
.sNameCol { float:left; width:<?=$studentNameWidth?>px; padding-left:<?=$cellPadding?>px; padding-right:<?=$cellPadding?>px; }
.dCol { min-width:<?=$columnWidth?>px; width:<?=$columnWidth?>px; border:0px solid blue; background:yellow; text-align:center; padding-left:<?=$cellPadding?>px; padding-right:<?=$cellPadding?>px; }
</style>
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
function viewport() {
if (typeof window.innerWidth != 'undefined') {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
} else {
// older versions of IE
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
}
function changewidth(viewportName) {
//alert('viewportName='+viewportName);
viewport();
cells = ( viewportwidth - <?=$headcolWidth?> - ( 2 * <?=$minusWidth?> ) ) / ( <?=$columnWidth?> + ( 2 * <?=$cellPadding?> ) );
blockviewportwidth = parseInt(cells) * ( <?=$columnWidth?> + ( 2 * <?=$cellPadding?> ) );
document.getElementById('debug').innerHTML = 'viewportwidth='+viewportwidth+' cells='+cells+' blockviewportwidth='+blockviewportwidth;
document.getElementById(viewportName).style.width = blockviewportwidth + "px";
}
// -->
</script>
</head>
<body onresize="changewidth('scrollDiv');">
<div style="padding-left:50px; border:1px solid red;">
<div class="scroll" id="scrollDiv">
<table class="scroll">
<tr>
<td class="headcol"><div class="sIdCol">Student Id</div><div class="sNameCol">Student Name</div></td>
<? for ($c=1; $c<26; $c++) { ?><td class="dCol">col <?=$c?></td><? } ?>
</tr>
<? for ($r=1; $r<16; $r++) { $sId = $r; while (strlen($sId) < 8) { $sId .= '0'; }?>
<tr>
<td class="headcol"><div class="sIdCol"><?=$sId?></div><div class="sNameCol">name goes here</div></td>
<? for ($c=1; $c<26; $c++) { ?><td class="dCol"><div style="float:left;">|</div><div style="float:right;">|</div><?=$c?></td><? } ?>
</tr>
<? } ?>
</table>
</div>
</div>
<div id="debug">debug</div>
<script type="text/javascript">
<!--
changewidth('scrollDiv');
// -->
</script>
</body>
</html>