이 마크 업을 가정 해보십시오.
<table class="table table-bordered" align="center"> 내가 얼마나 많은 셀을 가지고 있더라도 테이블은 항상 100 % 너비입니다. 왜 그래?
답변
부트 스트랩 내의 모든 테이블은 컨테이너에 따라 늘어나 .span*므로 원하는 그리드 요소 안에 테이블을 배치하여 쉽게 수행 할 수 있습니다 . 이 속성을 제거하려면 고유 한 테이블 클래스를 만들고 간단히 다음과 같은 내용으로 확장하려는 테이블에 테이블 클래스를 추가하면됩니다.
.table-nonfluid {
width: auto !important;
}이 클래스를 자신의 스타일 시트 안에 추가하고 간단히 다음과 같이 테이블 컨테이너에 추가 할 수 있습니다.
<table class="table table-nonfluid"> ... </table>이렇게하면 변경 사항이 부트 스트랩 스타일 시트 자체에 영향을 미치지 않습니다 (문서의 다른 곳에 유동 테이블이 필요할 수 있습니다).
답변
<table style="width: auto;" ...잘 작동합니다. Chrome 38, IE 11 및 Firefox 34에서 테스트되었습니다.
jsfiddle : http://jsfiddle.net/rpaul/taqodr8o/
답변
답변
답변 # 1 :
왜 싸워? 부트 스트랩 그리드를 사용하여 테이블 너비를 간단하게 제어 해보십시오. 이것은 부트 스트랩 3 마크 업입니다.
<div class="row">
<div class="col-sm-6">
<table></table>
</div>
</div>포함하는 요소 너비의 절반 (12/6)의 테이블이 생성됩니다.
때로는 다른 답변에 따라 인라인 스타일을 사용하지만 권장하지 않습니다.
답변 # 2 :
부트 스트랩 4를 사용하는 경우 너비와 같은 멋진 도우미 클래스가 있습니다.
w-25, w-50, w-75, and w-100문서는 다음과 같습니다. https://getbootstrap.com/docs/4.0/utilities/sizing/
답변
나는 같은 문제가 있었고 테이블을 수정 한 다음 내 td 너비를 지정했다. 당신이 일을하면 당신도 할 수 있습니다.
<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>
<td width="10%" /td>나는 .table-nonfluid와 함께 운이 없었습니다.
답변
나는 추가 style="width: auto !important"하고 나에게 훌륭하게 작동했습니다!
답변
