Bootstrap 4 테이블에서 열 크기 조정을 달성하는 방법은 무엇입니까?

Bootstrap 4의 테이블 열 크기 조정

질문:

Bootstrap 3에서는 테이블 열 너비를 수정할 수 있습니다. 태그에 col-sm-xx를 추가하여 테이블 헤더 행을 만듭니다. Bootstrap 4에는 이 기능이 없는 것 같습니다. Bootstrap 4에서 열 크기 조정을 어떻게 할 수 있나요?

답변:

업데이트됨(2018)

성공적인 작업을 보장하려면 테이블에 테이블 클래스가 포함되어 있는지 확인하세요. Bootstrap 4 테이블은 "옵트인"되어 테이블 기능을 시작하려면 테이블 클래스를 명시적으로 추가해야 합니다.

Bootstrap 3.x 조정

Bootstrap 3 .x에서는 테이블 셀의 부동 상태를 제거하기 위해 추가 CSS가 사용되었습니다.

<code class="css">table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}</code>

Bootstrap 4 Alpha는 이 사용자 정의를 생략했지만 최종 릴리스에 포함될 수 있습니다. 이를 추가하면 테이블 셀이 테이블 헤더에 설정된 너비를 따르도록 보장할 수 있습니다.

Bootstrap 4 Alpha 2 업데이트

Bootstrap 4가 Flexbox로 전환되면서 열 너비가 자동으로 상속되지 않습니다. 테이블 헤더에서. 이 문제를 해결하려면 테이블 셀의 d-inline-block 클래스를 활용하여 열의 기본 display:flex 설정을 재정의하세요.

추가 크기 조정 옵션

에이. 크기 조정 유틸리티 클래스(Bootstrap 4.0.0)

<code class="html"><thead>
  <tr>
    <th class="w-25">25</th>
    <th class="w-50">50</th>
    <th class="w-25">25</th>
  </tr>
</thead></code>

b. Flexbox 및 열 그리드 클래스

<code class="html"><table class="table table-bordered">
  <thead>
    <tr class="d-flex">
      <th class="col-3">25%</th>
      <th class="col-3">25%</th>
      <th class="col-6">50%</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-3">..</td>
      <td class="col-sm-3">..</td>
      <td class="col-sm-6">..</td>
    </tr>
  </tbody>
</table></code>

참고: 테이블 행에 display:flex를 적용하면 테두리 표시에 영향을 미칠 수 있습니다.

위 내용은 Bootstrap 4 테이블에서 열 크기 조정을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!