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 등)는 여전히 좁습니다.
답변
다음은 작동하지 않습니다. 다른 문제가 발생합니다. 이제 100 % 너비를 수행하지만 더 작은 장치에서는 응답하지 않습니다.
.table-responsive {
display: table;
}이 모든 답변은 display: table;. 현재 유일한 해결책은 래퍼로 사용하는 것입니다.
<div class="table-responsive">
<table class="table">
...
</table>
</div>답변
이 솔루션은 저에게 효과적이었습니다.
테이블 요소에 다른 클래스를 추가하기 만하면됩니다.
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)로 설정합니다.
답변
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와 함께 사용할 수 있습니다.
답변
어떤 이유로 특히 반응 형 테이블이 제대로 작동하지 않습니다. 제거하여 패치 할 수 있습니다.display:block;
.table-responsive {
display: table;
}버그 신고를 할 수 있습니다.
편집하다:
답변
이 답변 중 어느 것도 작동하지 않습니다 (오늘 날짜 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
답변
프레임 워크의 v4를 준수하는 솔루션은 적절한 중단 점을 설정하는 것입니다. .table-responsive를 사용하는 대신 .table-responsive-sm을 사용할 수 있어야합니다 (소형 장치에서만 반응하도록).
사용 가능한 모든 엔드 포인트를 사용할 수 있습니다. table-responsive {-sm | -md | -lg | -xl}
답변
그 이유는 .table-responsive클래스가 display: block이전에서 변경 하는 속성 을 요소에 추가 하기 때문 display: table입니다.
이 속성을 display: table자신의 스타일 시트로 다시 재정의합니다.
.table-responsive {
display: table;
}참고 :이 스타일이 재정의 할 부트 스트랩 코드 후에 실행되는지 확인하십시오.
