0
固定ヘッダーとスクロール可能なボディーを持つ2つの独立したコンテナーを作成する方法this固定テーブルヘッダーを作成することはできますが、 1つは水平にスクロールすることができます。オーバーフローが隠され、同じ時間スクロール
左側のツリーテーブルとガントチャートは両方とも水平方向にスクロールできますが、右側のガントチャートは垂直方向にのみスクロールします。
、以下の私のコードを確認してください私は私が望むほとんど何acchivedが、私は二つのこと
1を修正するためにニートHACE）テーブルB上ではなく横スクロール動作 2を壊すことなく、ヘッダーを修正する必要があります）どのように両方ともA & B縦スクロールは、同時に誰かがスクロールするときなど、同時にsyncrounaslyで起こる可能性があります。テーブルAテーブルは、同時に垂直方向にスクロールする必要があります。このリンクhttp://www.bryntum.com/playpen/react/（スクロールを有効にするには、いくつかのタスクを追加）
CSSとすると全ページ
th, td{
padding: 10px 20px;
width: 100px;
}
th{
background: #fff;
}
td{
background: #efefef;
}
.fl{
float: left;
}
.panel_body{
height: 200px;
width: 430px;
overflow: hidden;
overflow-y:scroll;
}
.panel_body.scroll_h{
overflow-x: scroll;
width: 300px;
height: 240px;
}
.scroll_h table{
width: 500px;
}<div class="panel">
<div class="fl panel_left">
<header>
<table>
<thead>
<tr>
<th>Table A</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
</table>
</header>
<section class="panel_body">
<table>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</div>
<di class="fl panel_right">
<section class="panel_body scroll_h">
<table>
<thead>
<tr>
<th>Table B</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</di>
</div>でこのコードスニペットを確認してくださいのような
|またはJs。
コードはどこですか？ – nashcheez
http://stackoverflow.com/search?q=%5Bjavascript%5Dfixed+table+header – Teemu
http://www.bryntum.com/playpen/react/ –