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

レスポンシブ ブートストラップ 3 テーブルの最初の列をピン留めする

テーブルの応答性を高めることは、特に画面が制限されている場合のモバイル Web デザインにとって重要です。不動産では、特定のコンテンツを優先する必要があります。このようなシナリオでは、重要な情報に簡単にアクセスできるように、テーブルの最初の列を固定したままにすることが望ましい場合があります。

この目標を達成するための効果的な解決策の 1 つは、JavaScript と CSS を活用することです。最初の列のクローンを作成し、絶対配置を適用することにより、クローンされた列をそのままにしたまま、テーブルの残りの部分を水平方向にスクロールできます。この手法により、多くの場合、テーブル ヘッダーなどの重要な情報が含まれる最初の列が、スクロールに関係なく表示されたままになります。

jQuery の実装

$( 内に JavaScript コードをカプセル化します。 function(){...}) ブロックを使用して、DOM ロード時の適切な実行を保証します。既存のテーブルの jQuery クローンを作成し、元のテーブルの前に挿入し、カスタマイズされたクラス「fixed-column」を割り当てて区別します。

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

クローンされた列の行の高さを次のように調整します。元のテーブルのテーブルと一致します。

<code class="javascript">$fixedColumn.find('tr').each(function(i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});</code>

CSS スタイル

クローンされた列を絶対的に配置するための CSS スタイルを定義し、幅を設定し、適切な境界線と背景を適用します。色。メディア クエリを利用して、768 ピクセルを超えるビューポート サイズのクローン列を非表示にし、大画面での最適な表示を確保します。

<code class="css">.table-responsive > .fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}  </code>

<code class="css">@media(min-width:768px) {
    .table-responsive > .fixed-column {
        display: none;
    }
}</code>

現実世界のアプリケーション

以下に提供される付随のデモは、このテクニックの実際の動作を示しており、モバイル デバイスでテーブルの残りの部分を水平方向にスクロールしている場合でも、最初の列を効果的に修正します。

結論

次の組み合わせjQuery と CSS により、Bootstrap 3 レスポンシブ テーブル内の最初の列の固定が可能になり、デバイスの向きに関係なく重要なコンテンツが確実に表示されたままになります。最初の

を複製することにより

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