bootstrap 3 : 향상된 모바일 유용성을위한 고정 된 첫 번째 열이있는 응답 형 테이블 만들기

모바일 장치는 복잡한 데이터를 표시 할 때 고유 한 과제를 제시합니다. 테이블. 이러한 장치에서 테이블을 반응하기 위해 Bootstrap은 "테이블 응답"클래스를 제공합니다. 그러나, 테이블 헤더를 포함하는 첫 번째 열이 사용자가 수평으로 스크롤하더라도 고정되고 눈에 잘 띄지 않도록하는 것이 바람직하다는 것을 알 수 있습니다.

jQuery code

$(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());
    });
});

$ (function () { var $ table = $ ( '. table'); var $ fixedcolumn = $ table.clone (). insertbefore ($ table) .addclass ( '고정 컬럼'); $ fixedColumn.Find ( 'TH : NOT (: First-Child), TD : NOT (: First-Child)'). remove (); $ fixedColumn.Find ( 'tr'). 각 (함수 (i, elem) { $ (this) .Height ($ table.Find ( 'tr : eq ('i ')'). 높이 ()); }); });

css code

$(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());
    });
});

. table-responsive> .fixed-column { 위치 : 절대; 디스플레이 : 인라인 블록; 너비 : 자동; 국경 오른쪽 : 1px solid #ddd; 배경색 : #fff; } @Media (min-width : 768px) { .table-responsive> .fixed-column { 디스플레이 : 없음; } }

설명

jQuery 코드는 원래 테이블을 클론하고 테이블 앞에 삽입하여 클래스 "고정 컬럼"을 제공합니다.
3. .
복제 된 테이블에서 첫 번째 열을 제외한 모든 열을 제거합니다.

클로닝 테이블의 행의 높이를 원래 테이블과 일치하도록 조정합니다.

CSS 코드는 CSS 코드입니다. 원래 테이블이 수평으로 두루를 둔 상태에서 정리 된 너비와 테두리가있는 상태에서 복제 된 테이블을 절대적으로 배치합니다.

이 접근 방식은 테이블의 첫 번째 열이 모바일 장치에 고정되어있어 유용성을 향상시킵니다. 및 특히 ​​수많은 열이있는 테이블 용 내비게이션.