web-dev-qa-db-ja.com

Bootstrapレスポンシブテーブルの列のサイズを設定する方法

Bootstrapレスポンシブテーブルの列のサイズをどのように設定しますか？テーブルの応答機能を失いたくありません。 IE8でも機能する必要があります。 HTML5SHIVとRespondを含めました。

Bootstrap 3（3.2.0）を使用しています

<div class="table-responsive">
    <table id="productSizes" class="table">
        <thead>
            <tr>
                <th>Size</th>
                <th>Bust</th>
                <th>Waist</th>
                <th>Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>6</td>
                <td>79 - 81</td>
                <td>61 - 63</td>
                <td>89 - 91</td>
            </tr>
            <tr>
                <td>8</td>
                <td>84 - 86</td>
                <td>66 - 68</td>
                <td>94 - 96</td>
            </tr>
        </tbody>
    </table>
</div>
htmlcsshtml5twitter-bootstraptwitter-bootstrap-3
37
Brendan Vogt

ブートストラップ4.0

すべての migration Bootstrap 3から4への変更に注意してください。テーブルで、クラスd-flexを追加してflexボックスを有効にし、xsは、bootstrapがビューポートを自動的に検出できるようにします。

<div class="container-fluid">
    <table id="productSizes" class="table">
        <thead>
            <tr class="d-flex">
                <th class="col-1">Size</th>
                <th class="col-3">Bust</th>
                <th class="col-3">Waist</th>
                <th class="col-5">Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-1">6</td>
                <td class="col-3">79 - 81</td>
                <td class="col-3">61 - 63</td>
                <td class="col-5">89 - 91</td>
            </tr>
            <tr class="d-flex">
                <td class="col-1">8</td>
                <td class="col-3">84 - 86</td>
                <td class="col-3">66 - 68</td>
                <td class="col-5">94 - 96</td>
            </tr>
        </tbody>
    </table>

ブートプライ

ブートストラップ3.2

テーブル 列幅は grids doと同じレイアウトを使用します; col-[viewport]-[size]を使用します。列サイズは合計で12であることを忘れないでください。この例では1 + 3 + 3 + 5 = 12。

        <thead>
            <tr>
                <th class="col-xs-1">Size</th>
                <th class="col-xs-3">Bust</th>
                <th class="col-xs-3">Waist</th>
                <th class="col-xs-5">Hips</th>
            </tr>
        </thead>

<th>要素ではなく<td>要素を設定して、列全体を設定することを忘れないでください。動作する BOOTPLY です。

最初にモバイルビュー（col-xs-*）を常に使用するように思い出させてくれた@Danに感謝します。

89
Jordan.J.D

インラインスタイルを使用して、<th>タグで幅を定義できます。幅の合計が100％になるようにします。

    <tr>
        <th style="width:10%">Size</th>
        <th style="width:30%">Bust</th>
        <th style="width:50%">Waist</th>
        <th style="width:10%">Hips</th>
    </tr>

ブートプライデモ

通常、インラインスタイルを使用することは理想的ではありませんが、正確な幅で非常に具体的かつきめ細かく取得できるため、柔軟性があります。

16
Dan

次のBootstrapクラスを使用できます

<tr class="w-25">

</tr>

詳細については、次のページを確認してください https://getbootstrap.com/docs/4.1/utilities/sizing/

0
dev