ブートストラップテーブルの列をコンテンツに適合させる

85

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）

html  css  twitter-bootstrap 
— オクトポイド
ソース
これを投稿して、私はちょうど考えました-その列を正しく整列させれば、それはほぼ同じだと思います-他の列にスペースを必要とするのに十分なデータがある場合、とにかくそれを引っ張るでしょう。編集：Doh-最小サイズにドロップダウンする必要がある列が複数ある場合、これは機能しません。
— オクトポイド2015
6
これはレイアウトにも当てはまりますが、表形式のデータにはテーブルはまったく問題ありません。
— オクトポイド2015
2
テーブルの代わりにdivを使用する必要があります。次に、ページ幅に一致するように幅にパーセンテージ値を割り当てることができます。
— sqe 2015
6
テーブルは構造に使用しないでください。通常はテーブルに入るデータにテーブルを使用できます。Octopoidは、構造にtableタグを使用しておらず、データの表示に使用されています。これは、テーブルタグの正しい使用法です。
— gewh 2015

回答:

158

テーブルのセル幅をコンテンツに合わせるクラスを作成します

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}
— tmg
ソース
7
ああ-私はこれをtdルールに入れてから適用したth-それは完璧に機能する、ありがとう。：）（気にしないでください、私もあなたの答えにthルールを追加しました）
— Octopoid 2015
22

Bootstrap4.5および5.0でテスト済み

どの解決策も私にはうまくいきません。ザ・td最後の列は、まだ完全な幅を取ります。だからここに解決策があります。

table-fitあなたに追加table

table.table-fit {
    width: auto !important;
    table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
    width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
    width: auto !important;
}

これがsass使用用のものです。

@mixin width {
    width: auto !important;
}

table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th, tfoot th  {
            @include width;
        }
        tbody td, tfoot td {
            @include width;
        }
    }
}
— デクスター
ソース
1
これは、bs4で機能する唯一のソリューションです。トンありがとう！
— TheWiz
12

ちょっと古い質問ですが、これを探してここに到着しました。私はテーブルをできるだけ小さくして、その内容に合うようにしたかったのです。解決策は、テーブルの幅を任意の小さな数値（たとえば、1px）に設定することでした。私はそれを処理するためにCSSクラスを作成しました：

.table-fit {
    width: 1px;
}

そしてそれを次のように使用します：

<table class="table table-fit">

例：JSFiddle

— ペドロ・ウォルター
ソース
2
問題は、テーブルのすべての列ではなく、テーブルの一部の列のみに関連しています
— GabiM 2017
2
ええ、でも私の問題の解決策を見つける必要があったので、私はここに到着しました。私はこれを私の答えで説明しました。
— ペドロウォルター
2
それはまだこの質問に対する不適切で間違った答えです。
— マリティム2018年
8

w-autoネイティブブートストラップ4クラスをテーブル要素に追加すると、テーブルはそのコンテンツに適合します。

ここに画像の説明を入力してください

— MERTDOĞAN
ソース
1
これはFirefoxで機能し、実際のBoostrapソリューションです。
— paperduck
4

この解決策は毎回良いわけではありません。しかし、私には2つの列しかないので、2番目の列に残りのスペースをすべて使用させたいと思います。これは私のために働いた

 <tr>
    <td class="text-nowrap">A</td>
    <td class="w-100">B</td>
 </tr>
— サメーラK
ソース
1

私も助けてくれたので、このようにdivタグの周りにテーブルをラップすることができます。

<div class="col-md-3">

<table>
</table>

</div>
— アフマドハビブ
ソース
0 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<h5>Left</h5>
<table class="table table-responsive">
    <tbody>
        <tr>
            <th>Action</th>        
            <th>Name</th>
            <th>Payment Method</th>
        </tr>
        <tr>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>        
            <td>Bart Foo</td>
            <td>Visa</td>
        </tr>
    </tbody>
</table>

<h5>Right</h5>

<table class="table table-responsive">
    <tbody>
        <tr>                    
            <th>Name</th>
            <th>Payment Method</th>
            <th>Action</th>            
        </tr>
        <tr>

            <td>Bart Foo</td>
            <td>Visa</td>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>            
        </tr>
    </tbody>
</table>
スニペットを展開

— antelove
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.