プログラミングの助け、質問への回答 / Javascript /テーブルのヘッダーと最初の列にCSSスクロールを固定するにはどうすればよいですか（JSまたはJQueryを使用しています） - javascript、jquery、html、css

私のCSSスクロールをテーブルヘッダーと最初の列に固定するにはどうすればいいですか（私はJSやJQueryを使ってアイデアを開いています） - javascript、jquery、html、css

私は左の列を維持しようとすると苦労しています私の項目名は、私の行列テーブルから左右に移動するときのスクロールからです。私はまた、スクロールバーを上下に移動するときに、トップヘッダーテーブルをスクロールしないようにしたい。 CSSでこれを行うことはできますか？私はブートストラップを使用しています。私はJavaScriptやJQueryでそれをやっていればOKです。固定ヘッダーを持つようにコードを変更しようとしましたが、すべてが乱雑に見えます。

フィドルの私のコード

div.scroll {
width: 99%;
height: 100px;
overflow: scroll;
}

<h1><strong>Inventories</strong></h1>

<div class="scroll">
<table class="table table-striped" style="width:1500px">
<thead>
<tr>
<th></th>
<th style="text-align: center">Atlanta</th>
<th style="text-align: center">Detroit</th>
<th style="text-align: center">Orlando</th>
<th style="text-align: center">Rochester</th>
<th style="text-align: center">Bellevue </th>
<th style="text-align: center">Madison </th>
<th style="text-align: center">Santa Barbara </th>
<th style="text-align: center">Bismarck </th>
<th style="text-align: center">Ann Arbor</th>
<th style="text-align: center">Sioux Falls</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center ">Apple MacBook Air</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Asus Zenbook</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Dell XPS</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<td style="text-align: center ">Acer Travelmate P645.</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Sony Vaio Pro 13 Touch</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Samsung ATIV Book 9 Plus 13-inch (2015)</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<td style="text-align: center ">HP Spectre X360.</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">MacBook</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center "> UX305</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
</tr>
<tr>
<td style="text-align: center ">Lenovo ThinkPad T450s (Business Laptop)</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
</tbody>
</table>
</div>

回答：

回答№1は0

私は2日前に同じ問題を抱えていました。私がこの作業をしたのは、2つのテーブルを別々に作ることです。トップテーブルはヘッダーになり、ボトムテーブルはテーブル本体になります。したがって、「ヘッダ」テーブルが所定の場所に配置され、2番目のテーブルが必要になります overflow:auto。また、スクロールバーを2番目のテーブルから削除して、スクロールバーの幅を保つようにしてください。

この実装の欠点は、両方のテーブルのすべての列が適切にフィットするように幅を定義する必要があることです。

ところで、あなたが定義することができます text-align: center あなたのCSSで th そして td.

もしあなたがもっと助けが必要なら私に教えてください。

私のCSSスクロールをテーブルヘッダーと最初の列に固定するにはどうすればいいですか（私はJSやJQueryを使ってアイデアを開いています） - javascript、jquery、html、css

回答：

関連する質問