Bootstrap 4 테이블 열의 크기를 어떻게 조정합니까?-CSS 튜토리얼-php.cn

Bootstrap 4 테이블 열의 크기를 어떻게 조정합니까?

DDD

풀어 주다： 2024-10-30 05:57:28

원래의

658명이 탐색했습니다.

How do I resize Bootstrap 4 table columns?

Bootstrap 4 테이블 열 크기 조정

Bootstrap 3에서는 thead의 태그에서 col-sm-xx 클래스를 사용하여 테이블 열 크기 조정을 허용했습니다. 그러나 이 방법은 Bootstrap 4에서는 효과적이지 않습니다.

업데이트된 접근 방식

1단계: 테이블에 "table" 클래스 보장

Bootstrap 4 테이블은 "선택적"입니다. 즉, 테이블 클래스가 테이블 요소에 명시적으로 추가되어야 함을 의미합니다.

2단계: 인라인 블록 표시를 위한 CSS 추가

Bootstrap 3에는 이전에 테이블 셀 위치를 재설정하고 부동을 방지하기 위해 CSS가 포함되었습니다. 이 CSS는 Bootstrap 4 Alpha에는 없지만 추가할 수 있습니다.

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

로그인 후 복사

3단계: 크기 조정 유틸리티 클래스 사용(Bootstrap 4.0.0 이상)

또는 Bootstrap 4.0.0 이상에서는 너비에 대해 w-* 유틸리티 클래스를 사용할 수 있습니다.

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

로그인 후 복사

4단계: Flexbox 활용(Bootstrap 4.0.0 이상)

또 다른 옵션은 tr 행에 d-flex를 사용하고 열에 col-*와 같은 그리드 클래스를 사용하는 것입니다.

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

로그인 후 복사

위 내용은 Bootstrap 4 테이블 열의 크기를 어떻게 조정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!