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

이 마크 업을 가정 해보십시오.

<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/

Bootstrap 4를 사용하는 경우 .w-auto .

https://getbootstrap.com/docs/4.1/utilities/sizing/을 참조 하십시오

답변 # 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"하고 나에게 훌륭하게 작동했습니다!