Bootstrap 4 반응 형 테이블은 너비를 100 % 차지하지 않습니다.

96

Bootstrap 4를 사용하여 웹 앱을 만들고 이상한 문제가 발생합니다. 모바일 장치에서 테이블의 가로 스크롤을 허용하기 위해 Bootstrap의 테이블 응답 클래스를 활용하고 싶습니다. 데스크톱 장치에서는 테이블이 포함 된 DIV 너비의 100 %를 차지해야합니다.

테이블에 .table-responsive 클래스를 적용하자마자 테이블이 가로로 축소되고 더 이상 너비의 100 %를 차지하지 않습니다. 어떤 아이디어?

내 마크 업은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

.table-responsive 클래스에 100 % 너비를 적용하면 테이블 자체가 100 % 너비가되지만 하위 요소 (TBODY, TR 등)는 여전히 좁습니다.

css  bootstrap-4 
— 먹는 수면 코드
소스

답변:

158

다음은 작동하지 않습니다. 다른 문제가 발생합니다. 이제 100 % 너비를 수행하지만 더 작은 장치에서는 응답하지 않습니다.

.table-responsive {
    display: table;
}

이 모든 답변은 display: table;. 현재 유일한 해결책은 래퍼로 사용하는 것입니다.

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
— 존 팻 보이 도리 롤라
소스
2
이것에 대해 영원히 망쳐 놓았습니다. 단순히 포장하는 것에 대해 생각하기에는 너무 이르렀습니다. 당신의 남자
— JSF
table-responsive클래스를 래퍼로 사용하면 부트 스트랩 3으로 돌아갑니다 ...? 지금 해결책이있어서 다행입니다! Bootstrap 4 Alpha ;-)
— Steve Meisner 2017 년
베타에서는이 작업이 표시되지 않습니다. div를 제거하고 "table"을 따라 "table-responsive"를 추가해야 할 것 같습니다. 그렇게 .. <table class = "table table-responsive">
— Winnemucca
이 문제는 여전히 부트 스트랩 4에서 해결되지 않았지만의 일부가 귀하의 대답에 동의하지만 부트 스트랩 3에서 4 로의 마이그레이션 지침은 "응답 테이블에 더 이상 래핑 요소가 필요하지 않습니다. 대신 .table-responsive 바로 <table>. "... 여기에서 찾을 수 있습니다. getbootstrap.com/docs/4.0/migration/#tables
— Marin
버전 4.3.1에서 완벽하게 작동합니다! 감사합니다
— Ibrahim Isa
38

이 솔루션은 저에게 효과적이었습니다.

테이블 요소에 다른 클래스를 추가하기 만하면됩니다. w-100 d-block d-md-table

그래서 그것은 될 것입니다 : <table class="table table-responsive w-100 d-block d-md-table">

부트 스트랩 4의 w-100경우 너비를 100 % d-block(display : block) 및 d-md-table(display : table on min-width : 576px)로 설정합니다.

Bootstrap 4 디스플레이 문서

— Faytraneozter
소스
2
Bootstrap4 베타에서 작동합니다! 열쇠는 w-100이었습니다. 감사합니다.
— ObjectiveTC
이 솔루션은 그냥하는 것과 같은 효과가 <table class="table table-responsive-md">없습니까?
— JamesWilson
20

V4.1을 사용하고 문서에 따라 .table-responsive를 테이블에 직접 할당하지 마십시오. 테이블은 .table이어야하며 가로로 스크롤 가능 (반응 형)하려면 .table-responsive 컨테이너 (예 :)에 추가합니다 <div>.

반응 형 테이블을 사용하면 테이블을 쉽게 가로로 스크롤 할 수 있습니다. .table을 .table-responsive 로 래핑하여 모든 뷰포트에서 테이블이 반응 하도록 만듭니다.

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

그렇게하면 추가 CSS가 필요하지 않습니다.

OP의 코드에서 .table-responsive는 외부의 .col-md-12와 함께 사용할 수 있습니다.

— Marcelo Myara
소스
3
이것은 안정적인 버전의 부트 스트랩 이후로 올바른 답이 될 것입니다. Thx
— Peter
2
이것이 답입니다. 감사합니다
— Gjaa
1
정답입니다!
— Andrew Schultz
6

어떤 이유로 특히 반응 형 테이블이 제대로 작동하지 않습니다. 제거하여 패치 할 수 있습니다.display:block;

.table-responsive {
    display: table;
}

버그 신고를 할 수 있습니다.

편집하다:

기존 버그입니다.

— 세르 그 체르 나타
소스
5

이 답변 중 어느 것도 작동하지 않습니다 (오늘 날짜 2018 년 12 월 9 일). 여기서 올바른 해결책은 .table-responsive-sm을 테이블에 추가하는 것입니다.

<table class='table table-responsive-sm'>
[Your table]
</table>

이는 SM보기 (모바일)에만 응답 성 측면을 적용합니다. 따라서 모바일보기에서는 원하는대로 스크롤 할 수 있고 더 큰보기에서는 테이블이 응답하지 않아 원하는대로 전체 너비로 표시됩니다.

문서 : https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

— SongBox
소스
2

프레임 워크의 v4를 준수하는 솔루션은 적절한 중단 점을 설정하는 것입니다. .table-responsive를 사용하는 대신 .table-responsive-sm을 사용할 수 있어야합니다 (소형 장치에서만 반응하도록).

사용 가능한 모든 엔드 포인트를 사용할 수 있습니다. table-responsive {-sm | -md | -lg | -xl}

— Rubén_ic
소스
1

그 이유는 .table-responsive클래스가 display: block이전에서 변경 하는 속성 을 요소에 추가 하기 때문 display: table입니다.

이 속성을 display: table자신의 스타일 시트로 다시 재정의합니다.

.table-responsive {
    display: table;
}

참고 :이 스타일이 재정의 할 부트 스트랩 코드 후에 실행되는지 확인하십시오.

— 니힐 난자 파
소스
1

이것은 table-responsive테이블에의 속성을 제공 하는 클래스로 인해 발생합니다. 이것은 원래 클래스를 display:block덮어 쓰고 추가 할 때 테이블이 축소되는 이유입니다.tabledisplay:tabletable-responsive .

대부분의 경우 부트 스트랩 4는 여전히 개발 중입니다. 이 속성을 설정하는 고유 한 클래스로 덮어 쓰는 것이 안전 display:table하며 테이블의 응답성에 영향을주지 않습니다.

예 :

.table-responsive-fix{
   display:table;
}
— Callum
소스
1

다른 답변을 고려하여 이렇게하겠습니다. 감사합니다!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
— 알렉시스
소스
1

.table-responsive {-sm | -md | -lg | -xl}로 .table을 래핑하여 반응 형 테이블을 만들고 최대 576px, 768px의 각 최대 너비 중단 점에서 테이블을 가로로 스크롤합니다. 각각 992px 및 1120px.

.table-responsive {-sm | -md | -lg | -xl}로 테이블을 감싸십시오.

예를 들면 

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

부트 스트랩 4 테이블

— iMezied
소스
0

래퍼에서 권장되는 테이블 응답 클래스를 사용하면 응답 테이블이 (놀랍게도) 수평으로 축소된다는 것을 발견했습니다.

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

나를위한 해결책은이를 방지하기 위해 다음과 같은 미디어 중단 점과 클래스를 만드는 것이 었습니다.

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

그런 다음 적절한 클래스를 내 테이블 요소에 추가 할 수 있습니다. 예를 들면 :

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

여기서 래퍼는 부트 스트랩 당 크고 큰 경우 너비를 100 %로 설정합니다. table-lg 클래스를 테이블 요소에 적용하면 테이블 너비도 크고 큰 경우 100 %로 설정되지만 중간 및 작은 경우 992px로 설정됩니다. table-xs, table-sm, table-md 및 table-xl 클래스는 동일한 방식으로 작동합니다.

— ScottyB
소스
0

Bootstrap 4.x의 경우 디스플레이 유틸리티를 사용합니다.

w-100 d-print-block d-print-table

사용법 :

<table class="table w-100 d-print-block d-print-table">
— 건조한 찬 바람
소스
0

"sr-only"요소와 테이블 내부의 스타일이이 버그의 원인 인 것 같습니다. 적어도 나는 똑같은 문제가 있었고 몇 달 동안 벽에 머리를 부딪힌 후 원인을 결정했지만 여전히 이유를 이해하지 못했습니다. left:0"sr 전용"스타일에 추가하면 문제가 해결 되었습니다.

— 브린 뉴웰
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.