ブートストラップ4.0アルファ - テーブルに設定列幅

Question

私は、ブートストラップ4.0アルファ（http://v4-alpha.getbootstrap.com/content/tables/）を使用しています。..

私は5列を持つテーブルを作成しましたが、幅が自動的に設定されています。列あたりの幅のパーセンテージを設定したいと思います。

でclass = "col-xs-3"を使用しようとしましたが、これはstackoverflowで提案されているとおり、成功しませんでした。

私はこの質問についての投稿を見つけました。タイトルは彼がブートストラップV4を使用していると言っている間...彼は実際にブートストラップ3.3.7を使用しています。 （How to specify responsive column width for table in Bootstrap v4）

<table class="table table-striped table-hover table-responsive"> 
    <thead class="thead-inverse"> 
    <tr> 
     <th>Date</th> 
     <th>Description</th> 
     <th>Amount</th> 
     <th>Comments</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let expense of expenses"> 
     <td>{{expense.datetime | date}}</td> 
     <td>{{expense.description}}</td> 
     <td>{{expense.amount | currency:'USD':true}}</td> 
     <td>{{expense.comment}}</td> 
     <td></td> 
    </tr> 
    </tbody> 
    </table> 

Answer 1

Iは3.3から4に移行ので、少しfunkinessが存在し得ます。

1. col-xs-12がtheadに
2. trを設定する必要がありますテーブルを保持しているのdivコンテナは、ニーズに応じて、
3. テーブルクラスtable-responsiveもに依存して、rowと多分幅col-xs-12セットとして設定する必要がありますニーズ

<div class="col-md-12"> 
    <table class="table table-responsive table-striped table-hover table-sm"> 
    <thead> 
     <tr class="row col-xs-12"> 
     <th class="col-xs-9">Location</th> 
     <th class="col-xs-3">Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     ... 
    </tbody> 
    </table> 
</div>