如何凍結第一個表格列以增強 Bootstrap 3 中的行動可用性？

Bootstrap 3：建立具有固定第一列的響應式表格以增強行動可用性

行動裝置在顯示複雜資料時面臨獨特的挑戰表。為了使表格在這些裝置上回應，Bootstrap 提供了「表格回應」類別。但是，您可能會發現最好確保第一列（通常包含表標題）即使在使用者水平滾動時也保持固定和可見。

實現此目的的一種方法是透過jQuery 和CSS 的組合：

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();
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });
});

CSS 🎜>

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

說明

jQuery 程式碼複製原始表並將其插入到表之前，為其指定「固定列」類別。
1. 然後從克隆表中刪除除第一列之外的所有列.
2. 它調整克隆表格中行的高度以匹配原始表格。
3. CSS 程式碼以固定的寬度和邊框絕對定位克隆表格，使其保持在適當的位置，同時原始表格水平滾動。

這種方法可確保表格的第一列在行動裝置上保持固定，從而提高可用性和導航性，特別是對於具有大量列的表格。

以上是如何凍結第一個表格列以增強 Bootstrap 3 中的行動可用性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！