如何固定響應式 Bootstrap 3 表中的第一列？

固定響應式Bootstrap 3 表格中的第一列

增強表格的回應能力對於行動網頁設計至關重要，尤其是在螢幕有限的情況下房地產使得有必要優先考慮特定內容。在這種情況下，可能需要確保表格的第一列保持固定，以便輕鬆存取基本資訊。

實現此目標的一個有效解決方案是利用 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 響應式表格中的第一列，確保無論裝置方向如何，關鍵內容都保持可見。透過克隆第一個

以上是如何固定響應式 Bootstrap 3 表中的第一列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！