Bootstrap 4 でテーブル列のサイズを変更するにはどうすればよいですか?

ブートストラップ 4 でのテーブル列のサイズ設定

初期の問題:

ブートストラップ 3 では、col-sm-xx を使用テーブル ヘッダー (TH) 要素のクラスを使用すると、列のサイズを簡単に変更できます。ただし、これはブートストラップ 4 では機能しません。この記事では、同様の機能を実現するためのソリューションを提供します。

解決策 1: テーブル クラスを確認する

テーブルにテーブルがあることを確認します。クラスが適用されました。 Bootstrap 4 のテーブルは「オプトイン」です。つまり、目的の動作をアクティブにするためにこのクラスを追加する必要があります。

解決策 2: CSS Reset を利用する

適切な表示を確保するには列幅を調整するには、次の CSS を追加します。

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

解決策 3: インライン ブロック クラス

列が間違った幅を想定しないようにするには、d-inline を適用します。 -block クラスをテーブルのセルに追加します。

解決策 4: サイズ変更ユーティリティ クラス

ブートストラップ 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: フレックスボックス

柔軟性を高めるには、テーブルの行にフレックスボックスを使用し、列にグリッド クラスを使用することを検討してください。

<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 中国語 Web サイトの他の関連記事を参照してください。