Розмір стовпчика столу


104

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

Дивлячись на codeply за умови, що його розмір не належним чином, особливо якщо ви додасте деякі дані до таблиці. Подивіться, як це працює:

<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
як додаток до цього запитання: якщо у вас довгий вміст (наприклад, дуже довгі URL-адреси), для відображення таблиць початкового завантаження 4 не є чудовим рішенням, навіть маючи відповідь на розмір нижче. використання рішення flex-row або row / col має тенденцію до кращої роботи із переповненням та обтіканням тексту
Killerpixler

Відповіді:


162

Оновлено 2018 рік

Переконайтеся, що ваш стіл включає tableклас. Це пов’язано з тим, що таблиці Bootstrap 4 мають «дозвіл», тому 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 alpha, але він може бути доданий ще до останнього випуску. Додавання цього CSS допоможе всім стовпцям використовувати ширину, встановлену в thead..

Демонстрація Bootstrap 4 Alpha 2


ОНОВЛЕННЯ (станом на Bootstrap 4.0.0)

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

Іншим варіантом у BS4 є використання класів використання розмірів для ширини ...

<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

Нарешті, ви можете використовувати 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 (стабільний) Демо

Примітка: Зміна TR для відображення: flex може змінювати межі


Насправді це не належний розмір. Перевірте це, якщо ви додаєте деякі межі, щоб побачити, як виглядає розмір і коли ви додаєте рядок до тіла. Я поставив код у питанні
Killerpixler

Насправді ваш приклад BS4-A6 не працює, якщо у вас є переповнений вміст у стовпці, оскільки інші стовпці не розширені. Спробуйте вставити трохи лорему ipsum в одну колонку.
Killerpixler

1
Ваше рішення спрацювало. У моєму випадку мені потрібно було додати без жолобів у tr, щоб уникнути негативного заповнення jsfiddle.net/Vimalan/xhvdcasn
Vimalan Jaya Ganesh

Так, w-25, w-50і w-75класи працюють з бутстрапа 4. Дякую!
olidem

26

Інший варіант - застосувати гнучкий стиль до рядка таблиці та додати 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>

1
Працює, але vertical-align: middleбільше не працює з d-flexкласом.
Єва

Вертикальне вирівнювання дійсно не працює на макеті flexbox. Використовуйте align-items: baseline. Щоб дізнатись більше про флексбокс, прочитайте цей посібник
Якоб ван Лінген,

13

Використання d-flexкласу працює добре, але деякі інші атрибути вже не працюють, як vertical-align: middleвластивість.

Найкращий спосіб дуже легко розмірити стовпці - це використовувати widthатрибут із відсотком лише в theadклітинках.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

5
Найпростіше і найкраще рішення, чесно. Все інше для мене зазнало жалю.
Істота

3
Примітка. Використання атрибута width для <th> тепер не підтримується в HTML5
StefanJM

10

Я зламав це для випуску Bootstrap 4.1.1 відповідно до своїх потреб, перш ніж побачив допис @ florian_korner. Виглядає дуже схоже.

Якщо ви використовуєте sass, ви можете вставити цей фрагмент в кінець вашого бутстрапа. Здається, це вирішило проблему з chrome, IE та edge. Здається, нічого не зламає у firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

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

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

або якщо ви просто хочете скомпільовану утиліту css:

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }

5

Застереження: Ця відповідь може бути трохи старою. З початкової версії 4 beta. З того часу Bootstrap змінився.

Клас розміру стовпця таблиці змінено з цього

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

до

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

Здається, це не спрацьовує при встановленні ширини стовпців: codeply.com/go/Utyon2XEB6
Зім,


1
Інше питання не пов’язане. Ширина colums не працює в комірках таблиці через BS4 alpha 6 flexbox, як пояснено в моїй відповіді.
Зім

4

Я можу вирішити цю проблему, використовуючи такий код, використовуючи Bootstrap 4:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>

1

Станом на 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;
        }
      }
    }
  }
}

цей код взагалі не працює - намагався налагодити його протягом 1,5 годин, але мої знання sass занадто слабкі, щоб це зробити. Plz розмістіть робочі приклади наступного разу.
Slowwie
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.