テーブル列固定
6445 ワード
<html>
<head>
<style type="text/css">
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop-2);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-2);
background-color: #E6ECF0;
}
</style>
</head>
<body>
<div id = "scrolDiv" style="width: 60%; overflow: auto; cursor: default; display: inline; position: absolute; height: 20%;">
<table id = "DataTable" cellpadding='0' cellspacing='0' style="table-layout: auto" bordercolor="lightgrey" border = "1" width="120%" height="30%">
<tr class = "FixedTitleRow">
<td colspan = "6" align = "center">
?? ??
</td>
</tr>
<tr class = "FixedTitleRow">
<td class = "FixedTitleColumn" align = "center" width = "15%">
? ?
</td>
<td align = "center" width = "10%">
?
</td>
<td align = "center" width = "10%">
? ?
</td>
<td align = "center" width = "10%">
? ?
</td>
<td align = "center" width = "10%">
??
</td>
<td align = "center" width = "10%">
?
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
</table>
</div>
</body>
</html>