固定行ヘッダーを使用してテーブルを作成しようとしています(そのため、列ヘッダーをスクロールしている間)、それを達成できましたが、テーブル ヘッダーが下の行に揃えられていません。そのためのjsfiddleも作成しました。現在、出力は次のようになります。
抽出された HTML のサンプルを次に示します。
<head>
<style>
table
{
/*background-color: #aaa;*/
width: 800px;
}
tbody
{
/*background-color: #ddd;*/
height: 200px;
width: 800px;
overflow: auto;
}
td
{
}
thead > tr, tbody
{
display: block;
}
</style>
</head>
<body>
<div id="containerdiv" style="width: 800px">
<table id="dynamictable">
<thead>
<tr>
<th>
ID
</th>
<th>
Title
</th>
<th>
Media Title
</th>
<th>
Broadcast Time
</th>
<th>
Destination
</th>
<th>
Channel
</th>
<th>
Start Time
</th>
<th>
End Time
</th>
</tr>
</thead>
<tbody id="tablebody">
<tr id="0">
<td>
ID: 0
</td>
<td>
Some Content
</td>
<td>
Some more contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
</tr>
<tr id="1">
<td >
ID: 1
</td>
<td>
Some Content
</td>
<td>
Some more contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
</tr>
<tr id="Tr1">
<td>
ID: 1
</td>
<td>
Some Content
</td>
<td>
Some more contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
</tr>
</tbody>
</table>
</div>
</body>