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

Question 1

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

Question 2

Обновлено 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, но она может быть добавлена обратно в финальную версию. Добавление этого 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 может изменить границы

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

Question 4

Использование 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>

Question 5

Я взломал это для выпуска 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%; }

Question 6

Отказ от ответственности: этот ответ может быть немного устаревшим. Начиная с бета-версии bootstrap 4. С тех пор бутстрап изменился.

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

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

к

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

Question 7

Я могу решить эту проблему, используя следующий код с помощью 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>

Question 8

Начиная с 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;
        }
      }
    }
  }
}

Answer 1

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

1

в качестве дополнения к этому вопросу: если у вас длинный контент (например, очень длинные URL-адреса) для отображения таблиц начальной загрузки 4, это не лучшее решение, даже с учетом размера, приведенного ниже. использование гибких строк или строк /

Killerpixler

Answer 3

Обновлено 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, но она может быть добавлена обратно в финальную версию. Добавление этого 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 может изменить границы

Answer 4

На самом деле это не размер. Проверьте это, если вы добавите какие-то границы, чтобы увидеть, какой размер и когда вы добавляете строку в тело. Я вставил код в вопрос

Killerpixler

Answer 5

На самом деле ваш пример BS4-A6 не работает, если у вас есть переполненное содержимое в столбце, поскольку другие столбцы не расширяются. Попробуйте вставить немного lorem ipsum в один столбец.

Killerpixler

Answer 6

1

Ваше решение сработало. В моем случае мне нужно было добавить пробелы

Вималан Джая Ганеш

Answer 7

Да, w-25, w-50и w-75классы работают с бутстрапом 4. Спасибо!

olidem

Answer 8

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. Чтобы узнать больше о flexbox, прочтите это руководство

Джейкоб ван Линген,

Answer 9

1

Работает, но vertical-align: middleбольше не работает с d-flexклассом.

Ева,

Answer 10

Вертикальное выравнивание действительно не работает с макетом flexbox. Используйте align-items: baseline. Чтобы узнать больше о flexbox, прочтите это руководство

Джейкоб ван Линген,

Answer 11

Использование 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>

Answer 12

5

Честно говоря, самое простое и лучшее решение. Все остальное для меня с треском провалилось.

Существо

Answer 13

3

Примечание. Использование атрибута width для <th> теперь не поддерживается в HTML5

StefanJM

Answer 14

Я взломал это для выпуска 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%; }

Answer 15

5

Отказ от ответственности: этот ответ может быть немного устаревшим. Начиная с бета-версии bootstrap 4. С тех пор бутстрап изменился.

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

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

к

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

Абдалла Арбаб
источник

Похоже, это не работает при установке ширины столбцов: codeply.com/go/Utyon2XEB6

Зим

См. Этот stackoverflow.com/questions/41794746/…

Абдалла

1

Другой вопрос не имеет отношения. Ширина столбцов не работает с ячейками таблицы из-за гибкого бокса BS4 alpha 6, как описано в моем ответе.

Зим

Answer 16

Похоже, это не работает при установке ширины столбцов: codeply.com/go/Utyon2XEB6

Зим

Answer 17

См. Этот stackoverflow.com/questions/41794746/…

Абдалла

Answer 18

1

Другой вопрос не имеет отношения. Ширина столбцов не работает с ячейками таблицы из-за гибкого бокса BS4 alpha 6, как описано в моем ответе.

Зим

Answer 19

Я могу решить эту проблему, используя следующий код с помощью 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>

Answer 20

Начиная с 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;
        }
      }
    }
  }
}

Answer 21

этот код вообще не работает - пытался отладить его 1,5 часа, но мои познания в sass слишком слабы для этого. Плз опубликуйте рабочие примеры в следующий раз.

Slowwie

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

Ответы: