テーブルヘッダーとテーブルの最初の列をスティッキーにする方法
IAC93
ヘッダー列が一番上に固定されるようにしようとしていますが、最初の列（ヘッダーの後）も固定したいので、これが発生するはずです
：
これは私がこれまでに持っているものです、私は残りを働かせることができないようです。私は多くの方法を試しました。静的なトップヘッダーをテーブルのコンテンツに揃えるためにモバイルビュー用に設計しています。CSSは比較的新しいです。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="root">
<div>
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
<th>head9</th>
<th>head10</th>
<th>head11</th>
<th>head12</th>
<th>head13</th>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
table tbody, table thead {
display: block;
}
table thead {
width: 600px;
}
table tbody {
overflow: auto;
height: 100px;
width: 600px;
}
編集：列から行に修正されました。脳のおなら！
編集2：説明のための写真 
エリダシアン
わかりました、少し更新しました：
それは完璧ではありませんが、あなたが望んでいたものです。
私が何をした？
2を作成tbodyして別々のテーブルに配置し、テーブルをメインの下の正しい位置に移動しましたheader。これで完了です。
私が助けることができることを願っています。
スニペット：
table tbody, table thead {
display: block;
}
table thead {
width: 600px;
}
table tbody {
overflow: auto;
height: 100px;
width: 600px;
}
#tb1 {
width:50px;
height:130px;
margin-Left: 10px;
}
#tb2 {
right:100px;
width:570px;
height:105px;
}
.one {
float: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="root">
<div>
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
<th>head9</th>
<th>head10</th>
<th>head11</th>
<th>head12</th>
<th>head13</th>
</thead>
</table>
<table>
<div class="one">
<tbody id="tb1">
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</tbody>
</div>
</table>
<table style="float:left; margin-Top:-135px; margin-Left:50px;">
<div class="two">
<tbody id="tb2">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</tbody>
</div>
</table>
</div>
</div>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：Android: how to lose focus on editText when testing with espresso
- 次の投稿：rpmパッケージからのAnsibleインストールyumリポジトリ
関連記事
Related 関連記事
- 1
スティッキーヘッダーとスティッキーな最初の列があり、最初の列のコンテンツがヘッダーの下にオーバーフローするテーブル-CSSのみ
- 2
材料-テーブル反応。テーブルのタイトルとヘッダーをスティッキーにする方法
- 3
テーブルのスティッキーな行と列のヘッダー
- 4
2行のテーブルヘッダーをスティッキーにする方法は？！（jsなし）
- 5
テーブルヘッダーと最初の2列を固定する
- 6
Xamarin Formsを使用して、垂直方向にスティッキーなヘッダーと水平方向にスティッキーな最初の列を持つテーブルを作成するにはどうすればよいですか？
- 7
スティッキーヘッダー付きのテーブル。ヘッダーの最後の列がテーブルと比較して広すぎます
- 8
2つのスティッキー列とヘッダーを持つHTMLテーブル（CSSのみを使用）
- 9
テーブル本体のリンクをクリックすると、スティッキーテーブルヘッダーがジャンプします
- 10
テーブルヘッダーにテキストを動的に追加する方法
- 11
テーブルの列ヘッダーでテキストを垂直方向に回転させる方法
- 12
いくつかのテーブルヘッダーのスティッキーヘッダーを作成するにはどうすればよいですか？
- 13
各印刷ページのExcelヘッダーをテーブルの最初の行にする方法
- 14
CSSのみのChromeのスティッキーテーブルヘッダー
- 15
CSSのみのChromeのスティッキーテーブルヘッダー
- 16
テーブルヘッダー列とテーブル本体列の幅を揃える方法は？
- 17
セルのホバーで特定のテーブルヘッダーと最初のテーブル行を強調表示するためにCSSを使用する
- 18
固定ヘッドのスクロールテーブルのスティッキーサブヘッダー
- 19
ブートストラップサブテーブルのヘッダーを非表示にする方法
- 20
AWSRedshift外部テーブルのヘッダー行をスキップする
- 21
動的テーブルのヘッダーを作成する方法
- 22
HTMLテーブル：スティッキー列のオーバーラップヘッダー
- 23
複雑なテーブルヘッダーの位置スティッキー
- 24
SWT / JFaceのテーブル列ヘッダーにツールチップを追加する方法
- 25
theadに複数の行があるスティッキーヘッダーテーブル
- 26
Excelテーブル：空白の列とヘッダーを追加するvba
- 27
mysqlで列ヘッダーを持つすべてのテーブルを「テキスト」として表示する方法
- 28
CSSのみを使用してテーブルのスティッキーヘッダーを作成する方法はありますか？
- 29
テーブルヘッダーのテキストを垂直方向に中央揃え
コメントを追加