Bootstrap 4에서 테이블 열의 크기를 조정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-10-29 19:38:30

원래의

381명이 탐색했습니다.

How to Resize Table Columns in Bootstrap 4?

Bootstrap 4의 테이블 열 크기 조정

초기 문제:

Bootstrap 3에서 col-sm-xx 사용 열 크기를 쉽게 조정할 수 있도록 테이블 헤더(TH) 요소에 대한 클래스입니다. 그러나 이는 Bootstrap 4에서는 더 이상 작동하지 않습니다. 이 문서에서는 유사한 기능을 달성하기 위한 솔루션을 제공합니다.

해결책 1: 테이블 클래스 확인

테이블에 테이블이 있는지 확인하세요. 수업이 적용되었습니다. Bootstrap 4 테이블은 "선택적"입니다. 즉, 원하는 동작을 활성화하려면 이 클래스를 추가해야 합니다.

해결책 2: CSS 재설정 활용

올바른 표시를 보장하려면 열 너비에 다음 CSS를 추가하세요.

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

로그인 후 복사

해결책 3: 인라인 블록 클래스

열이 잘못된 너비를 가정하는 것을 방지하려면 d-inline을 적용하세요. -테이블 셀에 대한 클래스 차단.

해결책 4: 크기 조정 유틸리티 클래스

Bootstrap 4에는 열 너비를 설정하는 데 사용할 수 있는 크기 조정 유틸리티 클래스가 포함되어 있습니다.

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

로그인 후 복사

해결책 5: Flexbox

유연성을 높이려면 테이블 행에 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>

로그인 후 복사

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