반응형 Bootstrap 3 테이블의 첫 번째 열을 고정하는 방법은 무엇입니까?

반응형 Bootstrap 3 테이블의 첫 번째 열 고정

테이블의 응답성을 향상시키는 것은 모바일 웹 디자인, 특히 제한된 화면에서 중요합니다. 부동산에서는 특정 콘텐츠의 우선순위를 정할 필요가 있습니다. 이러한 시나리오에서는 테이블의 첫 번째 열을 고정하여 필수 정보에 쉽게 액세스할 수 있도록 하는 것이 바람직할 수 있습니다.

이 목표를 달성하기 위한 효과적인 솔루션 중 하나는 JavaScript와 CSS를 활용하는 것입니다. 첫 번째 열의 복제본을 만들고 절대 위치 지정을 적용하면 복제된 열을 그대로 유지하면서 테이블의 나머지 부분이 가로로 스크롤되도록 할 수 있습니다. 이 기술을 사용하면 테이블 헤더와 같은 중요한 정보가 포함된 초기 열이 스크롤에 관계없이 계속 표시됩니다.

jQuery 구현

$( function(){...}) 블록을 사용하여 DOM 로드 시 적절한 실행을 보장합니다. 기존 테이블의 jQuery 복제본을 생성하고 원본 테이블 앞에 삽입한 다음 사용자 정의 클래스 '고정 열'을 할당하여 차별화합니다.

<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 스타일을 정의합니다. 색상. 미디어 쿼리를 활용하여 768px 이상의 뷰포트 크기에 대해 복제된 열을 숨겨 대형 화면에서 최적의 디스플레이를 보장합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!