BinaryDevelop
  1. ホーム
  2. html

[解決済み] Bootstrapのテーブルカラムをコンテンツにフィットさせる

2022-11-12 21:16:57

質問

Bootstrapを使用して、表を描いています。一番右の列にはボタンがあり、そのボタンに合うように必要最小限のサイズにドロップダウンさせたいと思っています。 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-responsive">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Payment Method</th>
                <th></th>
            </tr>
            <tr>
                <td>Bart Foo</td>
                <td>Visa</td>
                <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>
            </tr>
        </tbody>
    </table>

これはこのようにレンダリングされます。

firebugのハイライトで、カラム幅はこのように広く出ています。

その列は、ページがより大きな動的幅モードである間、ページとともにスケールします。純粋な CSS でこれを修正する方法をいくらか考えていますが、それらのアプローチのほとんどは、おそらくサイトの低幅バージョンで問題を引き起こすでしょう。

どのようにしたら、その列をそのコンテンツの幅にドロップダウンさせることができるでしょうか?

(今まで通り - 既存のブートストラップクラス > 純粋なCSS > Javascript)

どのように解決するのですか？

テーブルのセル幅をコンテンツにフィットさせるクラスを作る 

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します