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 질문은 당신을 도울 수 있습니다

Twitter Bootstrap 테이블의 너비가 항상 100 % 인 이유는 무엇입니까?

참고 URL : https://stackoverflow.com/questions/14846026/how-to-display-tables-on-mobile-using-bootstrap