Bootstrap 4 размер столбца таблицы

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

Ответы

Ответ 1

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

http://codeply.com/go/zJLXypKZxL

ИЗМЕНИТЬ

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

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

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

Bootstrap 4 Alpha 2 Demo

ОБНОВЛЕНИЕ (с BS4 Alpha 6)

Теперь, когда 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

Ответ 2

Другой вариант - применить стиль гибкого стиля в строке таблицы и добавить 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>

Ответ 3

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

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

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

Ответ 4

Как и в Alpha 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;
        }
      }
    }
  }
}