レスポンシブ ブートストラップ テーブルの最初の列を修正するにはどうすればよいですか?

レスポンシブ ブートストラップ テーブルの最初の列の修正

レスポンシブ ブートストラップ テーブルは、モバイル デバイスでデータを表示する便利な方法です。ただし、最初の列を固定 (非スクロール) のままにするのは難しい場合があります。これに対する効果的な解決策は次のとおりです。

メソッド:

最初の列を修正するには、その列を複製し、CSS の位​​置を使用して元のテーブルの前に配置します。絶対。こうすることで、テーブルの残りの部分がスクロールしている間、複製された列はその場所に留まります。

ステップ 1: jQuery コード

jQuery を使用してテーブルを複製し、固定列:

$(function() {
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
});

ステップ 2: CSS スタイル

固定列の CSS ルールを定義します:

.table-responsive>.fixed-column {
    position: absolute;
}

固定列の外観と動作を変更するには、幅、背景色、境界線などの追加の CSS プロパティを追加できます。

追加の考慮事項:

• これこのソリューションは、水平スクロールが期待されるモバイル デバイスに最適です。
• 画面の幅が広いデバイスの場合は、不要な乱雑さを防ぐために固定列を非表示にすることもできます。
• 最小幅の値を調整します。固定列を非表示にするブレークポイントに一致するメディア クエリ。

デモ:

[動作デモへのリンクはここ]

以上がレスポンシブ ブートストラップ テーブルの最初の列を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。