표의 내용에 기반한 열 자동 너비

Question

테이블에서 col- {breakpoint} -auto를 사용할 수 있습니까?

col- {breakpoint} -auto 클래스를 사용하면 열의 내용의 자연 너비에 따라 크기를 조정할 수 있습니다.

Answer 1

당신은 >의 너무 < 테이블을 사용하지만, 지금까지의 내가 .col-auto 고려할 때 테이블 컬럼의 기본 동작의 종류 수 있습니다.

아래 예를 살펴보십시오. 전체 화면 (md 중단 점 위)에서 볼 때 모든 열은 .col-auto으로 동작합니다. 그러나 중단 점 아래에 지정된 너비 (예에서 두 번째 열, width: 100%;)가있는 첫 번째 열은 다른 모든 사용 가능한 공간을 차지합니다.

또 다른 사용 예로서, 부트 스트랩 문서는 form fields의 컨텍스트에서 .col-auto을 언급합니다.

<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col" class="col-auto">#</th> 
 
     <th scope="col" class="col-md-auto">First</th> 
 
     <th scope="col" class="col-md-auto">Last</th> 
 
     <th scope="col" class="col-md-auto">Handle</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>