ヘッダ固定、データがスクロールするテーブル(ほぼ完璧のはず)

css html

いろいろ試行錯誤の末、以下のようになった。
FireFox2.*,IE7ではほぼ完璧。IE6、safariとかoperaとかは見てない。
横スクロールが必要な場合は多分javascriptでガリガリ書かなければ無理。あと長い英数字はFireFoxでどうにもならないのでhiddenにした。適宜titleに全文入れておくか、tooltipを用意するか、列データにフィルターかましてwbrを詰め込むかする必要がある。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>

	<style type="text/css">
	body{
		font-size : 75%;
	}
	#MainContents{
		margin : 1em;
		
	}
	#scrollableTable{
		border : 1px solid #88AA88;
	}
	#scrollableTable table{
		width : 100%;
		border-collapse : collapse;
		table-layout : fixed;
	}
	#scrollableTableHead{
		padding-right : 17px;
		background-color : #DDEEDD;
		border-bottom: 1px solid #88AA88;
	}
	#scrollableTableBody{
		height : 5.3em;
		overflow-y : scroll;
		overflow-x : hidden;
		*padding-right : 17px;
	}
	#scrollableTable thead tr{
		height : 1em;
	}
	#scrollableTable thead th{
		border-right : 1px solid #88AA88;
		*border-top : 0px solid #88AA88;
		*border-left : 0px solid #88AA88;
		text-align : center;
	}
	#scrollableTable tbody tr{
		height : 2em;
	}
	#scrollableTable tbody td{
		height : 3em;
		border : 1px solid #88AA88;
		*border-top : 0px solid #88AA88;
		*border-left : 0px solid #88AA88;
		background-color : #FFFFFF;
		vertical-align : top;
		overflow : hidden;
	}
	#scrollableTable tbody td div{
		vertical-align : top;
		margin : 2px;
	}
	#scrollableTable .col3{
		width : 10%;
	}
	
	#scrollableTable .col2{
		width : 18%;
	}
	</style>
</head>
<body>
<div id="container">
	<form>
		<div id="MainContents">
			<div  id="scrollableTable">
				<div id="scrollableTableHead">
					<table border="0">
						<colgroup>
							<col class="col1" />
							<col class="col2" />
							<col class="col3" />
						</colgroup>
						<thead>
							<tr><th>列１</th><th>列２</th><th>列３</th></tr>
						</thead>
					</table>
				</div>
				<div id="scrollableTableBody">
					<table border="0" >
						<colgroup>
							<col class="col1" />
							<col class="col2" />
							<col class="col3" />
						</colgroup>
						<tbody>
							<tr><td valign="top"><div>データ１</div></td><td><div>9/11</div></td><td>データ１−１</td></tr>
							<tr><td valign="top"><div>データ２データ２データ２データ２データ２データ２データ２データ２データ２データ２データ２</div></td><td><div>9/12</div></td><td></td></tr>
							<tr><td valign="top">メッセージ３</td><td>9/13</td><td></td></tr>
							<tr><td valign="top"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td><td><div>9/14</div></td><td></td></tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</form>
</div>
</body>
</html>

課題

  • asp.netのGridViewを使う場合、各セルにスタイルクラスを設定すれば同じになるのか？(tbodyもこcolgroup/colも無い)
  • 横スクロールが必要な場合の処理。body側のスクロールイベントを拾ってheadのtableポジションを移動すればいいはず。
  • 列１に幅を指定していない。指定した時どうなる？

お試しあれ。