반응형 부트스트랩 테이블의 첫 번째 열을 수정하는 방법은 무엇입니까?

반응형 부트스트랩 테이블의 첫 번째 열 수정

반응형 부트스트랩 테이블은 모바일 장치에 데이터를 표시하는 편리한 방법입니다. 그러나 첫 번째 열을 고정(스크롤하지 않음) 상태로 유지하는 것은 어려울 수 있습니다. 이에 대한 효과적인 해결책은 다음과 같습니다.

방법:

첫 번째 열을 수정하려면 해당 열을 복제하고 CSS 위치를 사용하여 원본 테이블 앞에 배치할 수 있습니다. 순수한. 이렇게 하면 테이블의 나머지 부분이 스크롤되는 동안 복제된 열은 제자리에 유지됩니다.

1단계: jQuery 코드

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

2단계: CSS 스타일링

고정 열에 대한 CSS 규칙 정의:

.table-responsive>.fixed-column {
    position: absolute;
}

고정 열의 모양과 동작에 따라 너비, 배경색, 테두리 등 CSS 속성을 추가할 수 있습니다.

추가 고려 사항:

• 이것은 솔루션은 가로 스크롤이 예상되는 모바일 장치에 가장 적합합니다.
• 화면이 더 넓은 장치의 경우 고정 열을 숨겨 불필요한 혼란을 방지할 수 있습니다.
• 에서 최소 너비 값을 조정하세요. 고정 열을 숨겨야 하는 중단점과 일치하는 미디어 쿼리.

데모:

[여기에서 작업 데모 링크]

위 내용은 반응형 부트스트랩 테이블의 첫 번째 열을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!