ホームページ > 記事 > ウェブフロントエンド > Bootstrap 4 テーブルで列のサイズを変更するにはどうすればよいですか?
質問:
ブートストラップ 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 Update
Bootstrap 4 のフレックスボックスへの移行により、列幅は自動的に継承されません。テーブルヘッダーから。これを修正するには、テーブルのセルで d-inline-block クラスを利用し、列のデフォルトの display:flex 設定をオーバーライドします。
追加のサイズ変更オプション
a.ユーティリティ クラスのサイジング (ブートストラップ 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.フレックスボックス クラスと列グリッド クラス
<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 中国語 Web サイトの他の関連記事を参照してください。