Bootstrap을 사용하여 모바일에 테이블을 표시하는 방법은 무엇입니까?

90

내 테이블은 데스크톱에서 잘 표시되지만 모바일 버전을 보려고하면 테이블이 모바일 장치 화면에 비해 너무 넓어집니다. 반응 형 레이아웃을 사용하고 있습니다.

모바일보기의 테이블 너비를 어떻게 설정할 수 있습니까? Bootstrap을 사용하여 모바일보기에 테이블 형식 데이터를 표시하는 다른 대안은 무엇입니까?

twitter-bootstrap  twitter-bootstrap-3 
— 간더
소스
2
저는 부트 스트랩 3.0이 "모바일 우선"이 될 것임을 알았습니다. 모바일 테이블의이 "문제"를 해결할 것이라고 생각하는 사람이 있습니까?
테이블은 여전히 ​​Bootstrap 3에서 동일하게 보입니다. :(
— Giles Roberts
1
— ta.speot.is
@ ta.speot.is 이제 릴리스 후보보다 더 좋습니다. 모든 예제에는 4 개의 열만 있습니다. 여전히 넓은 테이블에서는 잘 작동하지 않습니다. 나는 고정 된 첫 번째 열과 나머지 스크롤이있는 솔루션을 사용했습니다.
— Giles Roberts
@ ta.speot.is 아래에서 답변을 확인했습니다. Bootstrap 3에 테이블 응답 클래스가 있다는 사실을 놓쳤습니다. 특정 열을 항상 표시 할 필요가없는 경우 잘 작동합니다.
— Giles Roberts

답변:

123

부트 스트랩 3에는 반응 형 테이블이 도입되었습니다 .

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4는 비슷하지만 몇 가지 새로운 클래스 를 통해 더 많은 제어가 가능합니다 .

...와 ... 모든 뷰포트에서 반응 .table-responsive. 또는을 사용하여 반응 형 테이블을 가질 최대 중단 점을 선택합니다 .table-responsive{-sm|-md|-lg|-xl}.

예를 들어 Jason Bradley 에게 감사드립니다 .

반응 형 테이블

— ta.speot.is
소스
6
감사합니다. 99.9 %의 사람들과 마찬가지로 나는 업데이트 문서를 읽지 않았습니다. 내가 가져야 할 것 같아요.
— David Bélanger 2013
1
과연! 게다가, 그것은 내가 처음에하고 싶었던 일을하고 있기 때문에 그것은 2 in 1입니다!
— David Bélanger 2013
table-responsive수업은 정확히 무엇을 합니까? 부트 스트랩 문서는 "가로로 스크롤하기 위해"라고 말하지만 스크롤링과 관련된 차이점을 알아 차리지 못합니다. 내가 눈에 띄는 유일한 차이점은 특정 화면 크기 ( 예제 참조 ) 에서 테이블 외부에 테두리가 있다는 것 입니다.
— Dennis
5
@ ta.speot.is 문서를 잘못 읽었고 클래스를 잘못 사용하고 있음을 깨달았습니다. 나는 .table-responsive테이블 <table class="table table-responsive">을 감싸는 대신 테이블 자체 에 추가 했습니다 (예 :) .table-responsive.
— Dennis
1
@PirateApp 사용 hidden-*상의 td는 숨기기하려는 열의의 getbootstrap.com/docs/3.3/css/#responsive-utilities은
— ta.speot.is
68

더 큰 테이블은 작동하더라도 모바일에서 정확히 친숙하지 않기 때문에 이러한 접근 방식 중 하나를 시도해 볼 수도 있습니다.

http://elvery.net/demo/responsive-tables/

나는 'No More Tables'에 부분적이지만 분명히 귀하의 응용 프로그램에 달려 있습니다.

— 화음
소스
3
환상적인 링크와 세 가지 정말 훌륭한 솔루션! 나는 당신의 대답을 찬성하기 위해이 질문으로 돌아가는 길을 구글로 돌아야했습니다. 감사!
— Simon
2
링크만으로 구성된 대답은 잘못된 스택 오버플로 에티켓입니다. 페이지가 누락되고 페이지의 내용이 변경 될 수 있으며 답변이 즉시 표시되지 않으며 답변을 개선 할 수 없습니다. BTW 링크가 더 이상 올바른 콘텐츠를 가리 키지 않습니다.
— Dennis
— Chords
1
@Dennis가 맞습니다. 링크에있는 내용을 요약하기 위해 답변을 정교하게 작성하고 데모 및 추가 세부 정보를 위해 링크도 유지하십시오. 그럼에도 불구하고 링크가 매우 흥미로워 서 내 찬성표를 얻습니다. 건배.
— Mario Awad
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.