[twitter-bootstrap] Bootstrap을 사용하여 모바일에 테이블을 표시하는 방법은 무엇입니까?
내 테이블은 데스크톱에서 잘 표시되지만 모바일 버전을 보려고하면 테이블이 모바일 장치 화면에 비해 너무 넓어집니다. 반응 형 레이아웃을 사용하고 있습니다.
모바일보기의 테이블 너비를 어떻게 설정할 수 있습니까? Bootstrap을 사용하여 모바일보기에 테이블 형식 데이터를 표시하는 다른 대안은 무엇입니까?
답변
부트 스트랩 3에는 반응 형 테이블이 도입되었습니다 .
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Bootstrap 4는 비슷하지만 몇 가지 새로운 클래스 를 통해 더 많은 제어가 가능합니다 .
…와 … 모든 뷰포트에서 반응
.table-responsive. 또는을 사용하여 반응 형 테이블을 가질 최대 중단 점을 선택합니다.table-responsive{-sm|-md|-lg|-xl}.
예를 들어 Jason Bradley 에게 감사드립니다 .
답변
더 큰 테이블은 작동하더라도 모바일에서 정확히 친숙하지 않기 때문에 이러한 접근 방식 중 하나를 시도해 볼 수도 있습니다.
http://elvery.net/demo/responsive-tables/
나는 ‘No More Tables’에 부분적이지만 분명히 귀하의 응용 프로그램에 달려 있습니다.
답변
부트 스트랩 내의 모든 테이블은 컨테이너에 따라 늘어납니다. 테이블을 .span요소 안에 넣어 크기를 제어 할 수 있습니다. 이 SO 질문은 당신을 도울 수 있습니다
