ブートストラップ4応答するテーブルの幅が特定の幅になるようにする

Question

一部の列の幅を固定し、自動調整しないようにする必要があるテーブルを作成する予定です。

この方法で試しましたが、機能しません。それでも、テキストの長さに基づいて幅を自動的に調整するようです。

どうすれば解決できますか？

<div class="container"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr class="m-0"> 
       <th class="w-20">a</th> 
       <th class="w-10">b</th> 
       <th class="w-20">c</th> 
       <th class="w-40">d</th> 
       <th class="w-10">e</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="m-0"> 
       <th class="w-20">a. Width with 20</th> 
       <th class="w-10">b. Smaller width column</th> 
       <th class="w-20">c. Should be small but I'm adding the maximum text here just to test if w-20 is working.</th> 
       <th class="w-40">d. Biggest width but not working!</th> 
       <th class="w-10">e. Another small column</th> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 1

これらのクラスはブートストラップには存在しません。それらのクラスは25％、50％、75％、100％しかありません。 あなたは彼らにを作成する必要があります。

.w-20 { 
 
    width: 20%; 
 
} 
 

 
.w-10 { 
 
    width: 10% 
 
} 
 

 
.w-40 { 
 
    width: 40%; 
 
} 
 

 
table { 
 
    table-layout:fixed;/* will switch the table-layout algorythm */ 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <table class="table table-bordered"> 
 
    <thead> 
 
     <tr class="m-0"> 
 
     <th class="w-20">a</th> 
 
     <th class="w-10">b</th> 
 
     <th class="w-20">c</th> 
 
     <th class="w-40">d</th> 
 
     <th class="w-10">e</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="m-0"> 
 
     <th class="w-20">a. Width with 20</th> 
 
     <th class="w-10">b. Smaller width column</th> 
 
     <th class="w-20">c. Should be small but I'm adding the maximum text here just to test if w-20 is working.</th> 
 
     <th class="w-40">d. Biggest width but not working!</th> 
 
     <th class="w-10">e. Another small column</th> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 
</div>

が

https://v4-alpha.getbootstrap.com/utilities/sizing/

サイジングを参照してください。幅と高さのユーティリティを使用して、要素を幅広または高さ（親に対して）で簡単に作成します。デフォルトでは、25％、50％、75％、100％のサポートが含まれています。

と

https://www.w3.org/wiki/CSS/Properties/table-layout

table-layout

table-layoutプロパティは、表のセル、行、および列をレイアウトするために使用されるアルゴリズムを制御します。

Answer 2

固定幅が必要な場合はカスタムクラスを使用します。

使用クラス

.W-20 {幅：！200pxの重要。 }