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

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

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

jQuery の実裝

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

<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>

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

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

CSS スタイル

クローンされた列を絶対的に配置するための CSS スタイルを定義し、幅を設(shè)定し、適切な境界線と背景を適用します。色。メディア クエリを利用して、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>

現(xiàn)実世界のアプリケーション

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

結(jié)論

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

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