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

ブートストラップ 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 設定をオーバーライドします。

追加のサイズ変更オプション

ａ．ユーティリティ クラスのサイジング (ブートストラップ 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 サイトの他の関連記事を参照してください。