bootstrap 4 dimensionamento colonne tabella

Question

In bootstrap 3 È possibile applicare col-sm-xx ai tag th nello thead e ridimensionare a piacere le colonne della tabella. Tuttavia questo non funziona in bootstrap 4. Come posso ottenere qualcosa di simile in bootstrap 4?

<thead> 
<th class="col-sm-3">3 columns wide</th> 
<th class="col-sm-5">5 columns wide</th> 
<th class="col-sm-4">4 columns wide</th> 
</thead> 

Osservando il codice fornito, esso non ha le dimensioni corrette, soprattutto se si aggiungono alcuni dati al tavolo. Vedere come questo funziona:

<div class="container" style="border: 1px solid black;"> 
    <table class="table table-bordered"> 
    <thead> 
     <tr class="row"> 
      <th class="col-sm-3">3 columns wide</th> 
      <th class="col-sm-5">5 columns wide</th> 
      <th class="col-sm-4">4 columns wide</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>123</td> 
      <td>456</td> 
      <td>789</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

Answer 1

Aggiornato 2018

Assicurati che il tuo tavolo include la classe table. Questo perché Bootstrap 4 tables are "opt-in" pertanto la classe table deve essere intenzionalmente aggiunta alla tabella.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x ha avuto anche un po 'di CSS per ripristinare le celle della tabella in modo che essi non galleggiano ..

table td[class*=col-], table th[class*=col-] { 
    position: static; 
    display: table-cell; 
    float: none; 
} 

Non so perché questo non è è Bootstrap 4 alfa, ma può essere aggiunto di nuovo nella versione finale. L'aggiunta di questo CSS aiuterà tutte le colonne di utilizzare le larghezze impostati nel thead ..

Bootstrap 4 Alpha 2 Demo

---

UPDATE (come di Bootstrap 4.0.0)

Ora che Bootstrap 4 è FlexBox , le celle della tabella non assumeranno la larghezza corretta quando si aggiunge col-*. Una soluzione alternativa consiste nell'utilizzare la classe d-inline-block nelle celle della tabella per impedire la visualizzazione predefinita: flex of columns.

Un'altra opzione BS4 è utilizzare le classi utils dimensionali per larghezza ...

<thead> 
    <tr> 
      <th class="w-25">25</th> 
      <th class="w-50">50</th> 
      <th class="w-25">25</th> 
    </tr> 
</thead> 

Bootstrap 4 Alpha 6 Demo

Infine, è possibile utilizzare d-flex sulle righe della tabella (tr), e la griglia col-* classi sulle colonne (th, td) ...

<table class="table table-bordered"> 
     <thead> 
      <tr class="d-flex"> 
       <th class="col-3">25%</th> 
       <th class="col-3">25%</th> 
       <th class="col-6">50%</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="d-flex"> 
       <td class="col-sm-3">..</td> 
       <td class="col-sm-3">..</td> 
       <td class="col-sm-6">..</td> 
      </tr> 
     </tbody> 
    </table> 

Bootstrap 4.0.0 (stable) Demo

Answer 2

La classe dimensionale colonna della tabella è stata modificata da questo

<th class="col-sm-3">3 columns wide</th> 

a

<th class="col-3">3 columns wide</th> 

Answer 3

Un'altra opzione è quella di applicare stili flessione alla riga della tabella, e aggiungere col-classes agli elementi di dati dell'intestazione/tabella della tabella:

<table> 
    <thead> 
    <tr class="d-flex"> 
     <th class="col-3">3 columns wide header</th> 
     <th class="col-sm-5">5 columns wide header</th> 
     <th class="col-sm-4">4 columns wide header</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="d-flex"> 
     <td class="col-3">3 columns wide content</th> 
     <td class="col-sm-5">5 columns wide content</th> 
     <td class="col-sm-4">4 columns wide content</th> 
    </tr> 
    </tbody> 
</table> 

Answer 4

Come di Alpha 6 è possibile creare il seguente file sass:

@each $breakpoint in map-keys($grid-breakpoints) { 
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 

    col, td, th { 
    @for $i from 1 through $grid-columns { 
     &.col#{$infix}-#{$i} { 
      flex: none; 
      position: initial; 
     } 
    } 

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 
     @for $i from 1 through $grid-columns { 
     &.col#{$infix}-#{$i} { 
      width: 100%/$grid-columns * $i; 
     } 
     } 
    } 
    } 
}