Bootstrap 4 reaktionsfähige Tischbreite pro Spalte mit spezifischer Breite

Question

Ich plane, eine Tabelle zu erstellen, in der einige Spalten eine feste Breite haben müssen und nicht automatisch angepasst werden.

Ich versuchte mit dieser Methode, aber es funktioniert nicht. Es scheint immer noch Breite automatisch auf der Textlänge anzupassen.

Wie soll ich das lösen?

<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

Diese Klasse existiert nicht im Bootstrap, Sie haben sie nur für 25%, 50%, 75% und 100%. Sie müssen sie erstellen:

.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>

Siehe

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

Sizing

Mit unseren Dienstprogrammen für Breite und Höhe können Sie ein Element so einfach wie breit oder hoch (relativ zum übergeordneten Element) gestalten. Inklusive Unterstützung für 25%, 50%, 75% und 100% standardmäßig.

und

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

table-layout

Die table-layout Eigenschaft steuert den Algorithmus die Tabellenzellen, Zeilen und Spalten-Layout verwendet.

Answer 2

Verwenden Sie benutzerdefinierte Klassen, wenn Sie feste Breite möchten.

Gebrauchsklasse

.w-20 {width: 200px wichtig; }