| 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>Table with fixed left column</title>
</head>
<?
$onresize = 'changeView();';
?>
<body onresize="<?=$onresize?>">
<style type="text/css">
body {
background-color:#FFFFFF;
font-size:1em; /*12px*/
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height:1.5em;
color:#000000;
background-image:url(Ridgewater_white.gif);
text-align:left;
}
.row_even { background-color:#FFFFFF; }
.row_odd { background-color:#EEEEEE; }
.left { text-align:left; }
.right { text-align:right; }
.normal { font-weight:normal; }
</style>
<?
$classIndex = 0;
$tableWidth = 1000;
$studentIdWidth = 80;
$studentNameWidth = 180;
$dataCellWidth = 45;
$cellPadding = 2;
$tablePadding = 50;
// Do not change.
$studentIdWidth -= ( 2 * $cellPadding );
$studentNameWidth -= ( 2 * $cellPadding );
$fixedColumnWidth = $studentIdWidth + $studentNameWidth + ( 4 * $cellPadding );
$leftPosition = $tablePadding + ( 2 * $cellPadding ) + 2;
?>
<style type="text/css">
div.scrollContainer { padding-left:<?=$tablePadding?>px; }
div.scroll { width: <?=$tableWidth?>px; overflow-x:scroll; margin-left:<?=$fixedColumnWidth?>px; overflow-y:visible; padding-bottom:20px; }
table.scroll { border-collapse:collapse; }
td.fixedColumn, th.fixedColumn { position:absolute; width:<?=$fixedColumnWidth?>px; left:<?=$leftPosition?>px; top:auto; }
td.dataColumn, th.dataColumn { min-width:<?=$dataCellWidth?>px; width:<?=$dataCellWidth?>px; text-align:center; padding-left:<?=$cellPadding?>px; padding-right:<?=$cellPadding?>px; }
.scroll td, .scroll th { white-space:nowrap; }
div.studentIdColumn { float:left; width:<?=$studentIdWidth?>px; padding-left:<?=$cellPadding?>px; padding-right:<?=$cellPadding?>px; }
div.studentNameColumn { float:left; width:<?=$studentNameWidth?>px; 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 - <?=$fixedColumnWidth?> - ( 2 * <?=$tablePadding?> ) ) / ( <?=$dataCellWidth?> + ( 2 * <?=$cellPadding?> ) );
blockviewportwidth = parseInt(cells) * ( <?=$dataCellWidth?> + ( 2 * <?=$cellPadding?> ) );
document.getElementById('debug').innerHTML = 'viewportwidth='+viewportwidth+' cells='+cells+' blockviewportwidth='+blockviewportwidth;
document.getElementById(viewportName).style.width = blockviewportwidth + "px";
}
// -->
</script>
<div class="scrollContainer">
<div class="scroll" id="scrollDiv<?=$classIndex?>">
<table class="scroll" id="gradeBook<?=$classIndex?>">
<tr>
<th class="fixedColumn">
<div class="studentIdColumn right">Student Id</div>
<div class="studentNameColumn left">Student Name</div>
</th>
<?
for ($c=1; $c<17; $c++) {
?>
<th class="dataColumn">col <?=$c?></th>
<?
}
?>
<th class="dataColumn">Total</th>
<th class="dataColumn">IP</th>
<th class="dataColumn">Final</th>
</tr>
<tr>
<th class="fixedColumn">
<div class="studentIdColumn"> </div>
<div class="studentNameColumn normal right">Points:</div>
</th>
<?
for ($c=1; $c<17; $c++) {
?>
<th class="dataColumn"><?=$c?></th>
<?
}
?>
<th class="dataColumn">Pts</th>
<th class="dataColumn">Grade</th>
<th class="dataColumn">Grade</th>
</tr>
<?
$cc = ' row_odd';
for ($r=1; $r<16; $r++) {
$sId = $r; while (strlen($sId) < 8) { $sId .= '0'; }
?>
<tr>
<td class="fixedColumn<?=$cc?>">
<div class="studentIdColumn right"><?=$sId?></div>
<div class="studentNameColumn">student name goes here</div>
</td>
<?
for ($c=1; $c<17; $c++) {
?>
<td class="dataColumn<?=$cc?>">
<div style="float:left;">|</div>
<div style="float:right;">|</div>
<?=$c?>
</td>
<?
}
?>
<td class="dataColumn<?=$cc?>"><div style="float:left;">|</div><div style="float:right;">|</div>50</td>
<td class="dataColumn<?=$cc?>"><div style="float:left;">|</div><div style="float:right;">|</div>A</td>
<td class="dataColumn<?=$cc?>"><div style="float:left;">|</div><div style="float:right;">|</div>C</td>
</tr>
<?
if ( $cc == ' row_odd' ) { $cc = ' row_even'; } else { $cc = ' row_odd'; }
}
$classIndex++;
?>
</table><!-- id="gradebook" -->
</div><!-- id="scrollDiv" -->
</div><!-- id="scrollContainer" -->
<div id="debug">debug</div>
<script type="text/javascript">
<!--
function changeView() {
<?
for ($i=0; $i<$classIndex; $i++) {
?>
changeWidth('scrollDiv<?=$i?>');
<?
}
?>
}
changeView();
// -->
</script>
</body>
</html>