부트 스트랩 3 고정 된 첫 번째 열이있는 응답 테이블

Question

모바일을 대상으로하므로 부트 스트랩 응답 테이블이 있습니다. 부트 스트랩 클래스 인 "table-responsive"클래스와 "table table-striped table-bordered table-hover table-condensed"클래스로 중첩 된 테이블이있는 div 만 있습니다.

첫 번째 열이 고정되어 있는지 (가로로 스크롤하지 않았는지) 확인하는 쉬운 방법이 있습니까? 휴대 기기에서는 매번 스크롤 될 가능성이 있지만 첫 번째 열에는 기본적으로 표 머리글이 포함되어있을 가능성이 높습니다.

Answer 1

모바일 장치 만 타겟팅하는 경우이 방법이 유용 할 수 있습니다. 테이블의 첫 번째 열을 복제하고 position:absolute을 적용하여 나머지 테이블을 스크롤 할 때 "앞에"나타납니다.

$(function(){ 
    var $table = $('.table'); 
    //Make a clone of our table 
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column'); 

    //Remove everything except for first column 
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove(); 

    //Match the height of the rows to that of the original table's 
    $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; /* bootstrap v3 fix for fixed column background color*/ 
} 
@media(min-width:768px) { 
    .table-responsive>.fixed-column { 
     display: none; 
    } 
} 

가에 대한 working demo있어

jQuery를 :

은이를 위해 당신은 몇 가지 기본적인 jQuery 코드 및 사용자 정의 CSS 클래스를 필요할 것 이 접근법