Bootstrapの他のテーブルに影響を与えずに、固定ヘッダーで1つのテーブルをスクロール可能にする方法
JC203
私は1日以上、非常に単純なことを考え出しました。私は約10のテーブルを使用するウェブサイトを持っています。これらの10個のテーブルのうち1つだけに、固定ヘッダーとスクロール可能なバーを持たせたいです。
私はオンラインで良い例を見つけてそれを修正しました。固定ヘッダーとスクロール可能なバーを備えたテーブルを作成できます。
新しいcss
.table-fixed tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed thead {
width: calc( 100% - 1em )
}
テーブル固定クラスをテーブル定義に追加すると、機能します。
<table class = "table table-bordered table-hover table-striped table-condensed table-fixed">
問題は、他のテーブルにテーブル固定を含めないと、他の9つのテーブルがすべて台無しになることです。例えば：
他のテーブルに追加されたテーブル固定クラスはありません
<table class = "table table-bordered table-hover table-striped table-condensed">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
</tr>
<tbody>
</table>
この問題を修正するにはどうすればよいですか？CSSへの変更が1つのテーブルにのみ影響するようにしたい。テーブル固定クラスは機能しますが、グローバルに影響を与えるtbodyを変更しているようです。これを修正する方法はありますか？
JC203
sringlandへのクレジット。
元のコードを変更しました：
.table-fixed tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed thead {
width: calc( 100% - 1em )
}
これに：
.table-fixed > tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed > thead {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed > tbody > tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed > thead {
width: calc( 100% - 1em )
}
この問題は、クラスのtbodyに影響を与えていたため>、直接の子にのみ影響し、thead, tbody tr {定義を分割するように追加することで解決されましたTable。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
すべてのテーブルに影響を与えずに特定のテーブルをスタイルする
- 2
他の関数に影響を与えずにテーブル内のIPアドレスをチェックする関数を終了/強制終了する方法
- 3
レイアウト（テーブル、色、スタイル）に影響を与えずに、保存後にブックの形式を維持する方法
- 4
テーブルヘッダーに影響を与えるブートストラップ表示クラス
- 5
他のテーブルに影響を与えずにmysqlからpmaテーブルを削除するにはどうすればよいですか？
- 6
マスターに影響を与えずにローカルブランチの履歴を削除する方法
- 7
他の行の配置に影響を与えずに、テーブルの空白を削除します
- 8
固定高さのボックスにスクロール可能なテーブルを作成する方法
- 9
テーブルの行に影響を与える最新のストアドプロシージャをいつどのように知るのですか？
- 10
Angular 2で複数の列を固定してテーブル列をスクロール可能にする方法は?
- 11
Firefoxでテーブルヘッダーを他のテーブル本体に揃えます
- 12
ヘッダーに影響を与えるためにテーブルにカーソルを合わせる
- 13
テーブルヘッダーとテーブルの最初の列をスティッキーにする方法
- 14
他のパーティションに影響を与えずにWindowsを再インストールする
- 15
別のセルに影響を与える1つのテーブルセルの変更
- 16
他のルールに影響を与えずにホームページをリダイレクトする
- 17
他のテーブルのスタイルに影響を与えるのではなく、1つのテーブルのみのtdパディングを変更しますか？
- 18
他のテーブル列に影響を与えずに単一のJTable列のサイズを変更する方法
- 19
別のテーブルの行をカウントして別のテーブルに影響を与える方法
- 20
bootstrap-vueテーブルのヘッダー行を非表示にする方法
- 21
私のテーブル以外にも影響を与えるCSSルール
- 22
私のテーブル以外にも影響を与えるCSSルール
- 23
次のスティッキーヘッダーに影響を与える長いタイトルのスティッキーヘッダー
- 24
固定ヘッダーとサイドバーで1つのグリッドアイテムをスクロールできるようにする
- 25
1つのテーブル列ヘッダーを他のヘッダーよりも高くするにはどうすればよいですか？
- 26
ウェブサイトに影響を与えずにワードプレスのテーマフォルダ名を変更する
- 27
Bazel：ヘッダーを1つのインクルードパスにグロブする方法
- 28
ドローアブルとテキストの不透明度に影響を与えずにEditTextアルファを変更する
- 29
テーブルヘッダーを修正して本文をスクロール可能にすると、テーブルヘッダーがテーブル本体の寸法に従わなくなります
コメントを追加