Bootstrap 4 テーブルの列のサイズを変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-10-30 05:57:28

オリジナル

657 人が閲覧しました

How do I resize Bootstrap 4 table columns?

ブートストラップ 4 のテーブル列のサイズ変更

ブートストラップ 3 では、thead のタグでcol-sm-xx クラスを使用してテーブル列のサイズを変更できました。ただし、この方法は Bootstrap 4 では有効ではありません。

更新されたアプローチ

ステップ 1: テーブル上の "table" クラスを確認する

ブートストラップ 4 テーブルは「オプトイン」です。つまり、テーブルクラスをテーブル要素に明示的に追加する必要があります。

ステップ 2: インラインブロック表示用の CSS を追加する

Bootstrap 3 には、以前はテーブルのセルの位置をリセットし、フローティングを防ぐための CSS が含まれていました。この CSS は Bootstrap 4 アルファ版にはありませんが、追加できます:

<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 以降)

もう 1 つのオプションは、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 中国語 Web サイトの他の関連記事を参照してください。