Bootstrap 4 반응 형 테이블은 너비를 100 % 차지하지 않습니다.
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;
}
참고 :이 스타일이 재정의 할 부트 스트랩 코드 후에 실행되는지 확인하십시오.
이는 table-responsive테이블에의 속성을 제공 하는 클래스로 인해 발생합니다. 이것은 원래 클래스를 display:block덮어 쓰기 때문에 이상 하고을 추가 할 때 테이블이 축소되는 이유 입니다.tabledisplay:tabletable-responsive
대부분의 경우 부트 스트랩 4는 여전히 개발 중입니다. 이 속성을 설정하는 고유 한 클래스로 덮어 쓰는 것이 안전 display:table하며 테이블의 응답성에 영향을주지 않습니다.
예 :
.table-responsive-fix{
display:table;
}
다른 답변을 고려하여 이렇게하겠습니다. 감사합니다!
.table-responsive {
@include media-breakpoint-up(md) {
display: table;
}
}
.table을 .table-responsive {-sm | -md | -lg | -xl}로 래핑하여 반응 형 테이블을 만들고 최대 576px, 768px의 각 최대 너비 중단 점에서 테이블을 가로로 스크롤합니다. 각각 992px 및 1120px.
.table-responsive {-sm | -md | -lg | -xl}로 테이블을 감싸십시오.
예를 들면
<div class="table-responsive-md">
<table class="table">
</table>
</div>
래퍼에서 권장되는 테이블 응답 클래스를 사용하면 응답 테이블이 (놀랍게도) 수평으로 축소된다는 것을 발견했습니다.
<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 클래스는 동일한 방식으로 작동합니다.
Bootstrap 4.x의 경우 디스플레이 유틸리티를 사용합니다.
w-100 d-print-block d-print-table
사용법 :
<table class="table w-100 d-print-block d-print-table">
참고 URL : https://stackoverflow.com/questions/41747667/bootstrap-4-responsive-tables-wont-take-up-100-width
'IT TIP' 카테고리의 다른 글
| mysql LIKE가 대소 문자를 구분하도록 어떻게 강제합니까? (0) | 2020.10.20 |
|---|---|
| 배경색으로 네이티브 테두리 반경 반응 (0) | 2020.10.20 |
| 자기를 사용합니다. (0) | 2020.10.20 |
| 파이프 라인 입력을 허용하는 PowerShell 스크립트를 작성하려면 어떻게해야합니까? (0) | 2020.10.20 |
| MySQL은 전체 열에서 모든 공백을 제거합니다. (0) | 2020.10.20 |