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

설명

1. jQuery 코드는 원본 테이블을 복제하고 테이블 앞에 삽입하여 "고정 열" 클래스를 부여합니다.
2. 그런 다음 복제된 테이블에서 첫 번째 열을 제외한 모든 열을 제거합니다. .
3. 원본 테이블과 일치하도록 복제된 테이블의 행 높이를 조정합니다.
4. CSS 코드는 고정된 너비와 테두리를 사용하여 복제된 테이블의 위치를 ​​절대적으로 지정합니다. 원래 테이블은 가로로 스크롤됩니다.

이 접근 방식을 사용하면 테이블의 첫 번째 열이 모바일 장치에 고정되어 특히 열이 많은 테이블의 유용성과 탐색이 향상됩니다.

위 내용은 Bootstrap 3에서 향상된 모바일 사용성을 위해 첫 번째 테이블 열을 고정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!