bootstrap 4 столбец таблицы калибровки

Question

В bootstrap 3 Я могу применить col-sm-xx к th тегам в thead и изменить размер столбцов таблицы по желанию. Однако это не работает в bootstrap 4. Как я могу добиться чего-то подобного в 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> 

Посмотрите на код, если оно не соответствует размеру, особенно если вы добавили некоторые данные в таблицу. Посмотрите, как это работает:

<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

Обновлен в 2018 году

Убедитесь, что таблица содержит table класса. Это связано с тем, что Bootstrap 4 tables are "opt-in", поэтому класс table должен быть намеренно добавлен в таблицу.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x также имел некоторые CSS для сброса ячеек таблицы, так что они не плавают ..

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

Я не знаю, почему это не является Bootstrap 4 альфа, но он может быть добавлен в окончательный выпуск. Добавление этого CSS поможет все столбцы использовать ширину, установленные в thead ..

Bootstrap 4 Alpha 2 Demo

---

UPDATE (от Bootstrap 4.0.0)

Теперь, когда Bootstrap 4 является Flexbox , ячейки таблицы не будут принимать правильную ширину при добавлении col-*. Обходным путем является использование класса d-inline-block на ячейках таблицы, чтобы предотвратить отображение по умолчанию: flex of columns.

Другой вариант в BS4 является использование классов размерной Utils для ширины ...

<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

Наконец, вы можете использовать d-flex по строкам таблицы (Tr) и col-* сетки классы на столбцах (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

Таблица классов размер столбца был изменен с этого

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

в

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

Answer 3

Другой вариант заключается в применении гибкого укладки в строке таблицы, и добавьте col-classes в элементы данных заголовка таблицы/таблицы:

<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

В Альфа 6 вы можете создать следующий 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; 
     } 
     } 
    } 
    } 
}