Адаптивная таблица bootstrap 3: Адаптивная таблица bootstrap – в примерах и подробностях для новичков

Leave a Comment / Адаптив / By /

Содержание

Адаптивная таблица bootstrap – в примерах и подробностях для новичков

 

Приветствую вас, дорогие подписчики и конечно же гости моего блога. Эту статью я писал специально для того, чтобы посвятить вас во все подробности работы с таким элементом, как адаптивная таблица Bootstrap. Это очень полезный и многофункциональный инструмент, который значительно упрощает верстку.

Я расскажу вам обо всех важных встроенных классах, подробно объясню, как они функционируют и конечно же приведу множество примеров. Приступим же!

Шаг 1. Просто создать таблицу

Итак, чтобы создать самое примитивное табличное представление в фреймворке Bootstrap 3, для начала вам нужно прописать разметку на html. Выглядит это вот так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<table>
    <thead>
      <tr>
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>

<table> <thead> <tr> <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table>

Если вы запустите код, то никакого стилевого оформления не увидите. А теперь используйте класс фреймворка для тега <table>:

<table>

Таблица так и осталась без границ по периметру, однако ее поля разделены горизонтальной линией, и она растянулась на всю ширину экрана.

Шаг 2. Сделать ее полосатой

Теперь чтобы создать полосатую таблицу необходимо только добавить определенный класс в код. И таковым является .table-striped. Строка будет выглядеть следующим образом:

<table> …</table>

По умолчанию полоса серого цвета чередуется с белой. Однако вы всегда можете залезть в css файл и там поменять значения стилевых свойств или же переопределить их через файл style.css.

Шаг 3. Ограничить ее!

Если же вам не нравятся таблицы без рамочки, то это можно исправить применением класса .table-bordered. Для примера я несколько подкорректировал стилевую разметку, добавив тени вокруг объекта.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<head>
…
<style> 
.container { 
margin: 9px;
}
.table-bordered {
box-shadow: 1px 2px 7px #191970;
}
</style>
</head>
<body>
 
<div>
   <table>
    <thead>
      <tr>
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>
</div>

<head> … <style> .container { margin: 9px; } .table-bordered { box-shadow: 1px 2px 7px #191970; } </style> </head> <body> <div> <table> <thead> <tr> <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table> </div>

Шаг 4. А я хочу вот эту строку!

Создатели Bootstrap предусмотрели такой класс, как .table-hover специально для тех разработчиков, которые хотят добавить выделение строк при наведении на них курсора. В этом случае в примере вам, дорогие читатели, стоит заменить .table- striped на обсуждаемый класс.

Шаг 5. Подчеркнуть цветом ее содержание

Если же в таблице вам необходимо выделить какие-то строки или ячейки в зависимости от их контекста, то можно обратиться за помощью к контекстуальным (Contextual) классам. Всего их 5 штук.

ЭлементОписание
.activeРаскрашивает строку/ячейку в тот же цвет, как и при использовании прошлого инструмента.
.dangerИнициализирует потенциально опасные действия. Выделяется красным цветом.
.successОповещает об успешном действии (цвет – зеленый).
.warningСветло-розовым цветом выделяет элементы, которым стоит уделить внимание.
.infoУказывает голубым на расположение нейтральной информации.

Так, в нашем примере перечисленные Contextual Classes можно применить, чтобы выделить какие товары есть на складе, а какие не завезли.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div>
   <table>
    <thead>
      <tr >
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>
</div>

<div> <table> <thead> <tr > <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table> </div>

Шаг 6. Компактнее, друзья, компактнее!

Чтобы уменьшить расстояние между строками был создан такой механизм, как .table-condensed. Он урезает внутренние отступы (padding) в половину. Добавьте его в уже известное вам место в программной реализации и проанализируйте результаты. Я же далее в своей программе этот прием использовать не буду.

Шаг 7. Сделать ее отзывчивой

Фреймворк предоставляет еще один очень полезный класс, который преобразовывает указанные табличные представления в отзывчивые. В этом случае последние сжимаются до размеров веб-страницы, однако само содержимое уменьшается до определенного количества пикселей, а после снизу появляется скролл.

За все названные действия отвечает .table-responsive. Его нужно добавить в блок, охватывающий всю табличную реализацию.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div>
  <div>
   <table>
    <thead>
      <tr >
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

<div> <div> <table> <thead> <tr > <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table> </div> </div>

Вот и все! Очень надеюсь, что вам понравилась моя статья. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на понравившиеся публикации с друзьями. До встречи! Пока-пока!

С уважением, Роман Чуешов

 

 

Прочитано: 530 раз

Bootstrap таблицы для начинающих

Продолжаем изучать Bootstrap и сегодня как вы могли догадаться из название пойдет речь о таблицах.

Стандартные бутстраповские таблицы имеют такое оформление:

  • Внутренние отступы ячеек.
  • Нету вертикальных границ, но добавлены серые горизонтальные.

Для этого нужно добавить вашей таблице класс table :


  <table>
    <tbody>
      <tr>
        <th>Имя</th>
        <th>Работа</th>
        <th>Город</th>
      </tr>
      <tr>
        <td>Влад</td>
        <td>Занимаюсь Front end'ом</td>
        <td>Питер</td>
      </tr>
      <tr>
        <td>Андрей</td>
        <td>Back end разработчик</td>
        <td>Минск</td>
      </tr>
      <tr>
        <td>Максим</td>
        <td>Занимаюсь SEO оптимизацией</td>
        <td>Москва</td>
      </tr>
    </tbody>
  </table>


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

Название классаЧто он делает
 table-stripedЧередует цвета строк
 table-borderedДобавляет ячейкам границы
 table-hoverИзменяет цвета строк при наведении
table-condensed
Уменьшает отступы ячеек
 Тут несколько классовИзменяет фон ячеек (смотрите внизу)
table-responsiveТаблица становиться адаптивной

Внизу находится подробная информация про каждый класс.

Чередование цвета строк


<table class = "table table-striped"> 
  ...
</table>

Этот эффект называют — зебра. Он добавляет серый цвет не четным строкам.

В Internet Explorer 8 и ниже вы не заметите никаких изменений (некоторые функции не используются).

Добавление границ


<table class = "table table-bordered"> 
  ...
</table>

У стандартной таблицы ячейки не имеют границ, поэтому нужно их самостоятельно добавлять.

Изменение цвета ячеек при наведении


<table class = "table table-hover"> 
  ...
</table>

При наведении на строки их фон будет становиться сероватым. Скажу сразу, увидеть хоть какие-то изменения сложно.

Компактные отступы


<table class = "table table-condensed"> 
  ...
</table>

Ячейки таблицы будут выглядеть меньше из-за уменьшения отступов (paddind). Так можно сделать таблицу компактнее, если мало места.

Фон ячеек

Bootstrap имеет пять стандартных фонов. Вы можете сделать тоже самое создав свой класс с background-color.

Название классаЧто он делает
activeИспользуется когда пользователь навел на строку или ячейку
warningПредупреждение, нужно обратить свое внимание
infoДополнительная информация
successУспешное выполнение
dangerЧто-то пошло неправильно

 

Адаптивные таблицы


<div class = "table-responsive">
  <table class = "table">
    ...
  </table>
</div>

Таблица автоматически подстраивается под размер окна. Так если ширина окна не вмещает содержимое внизу появится горизонтальный скрол. На ширине больше таблица выглядит как обычно.

Добавление этого класса идет к блоку div, который является родительским для таблицы

Поделиться ссылкой:

Bootstrap 3 table-table-responsive не работает



Я использую bootstrap 3 для веб-проекта. Я пытаюсь создать страницу с отзывчивой таблицей, чтобы у меня была полоса прокрутки, когда таблица слишком велика. Я сделал тестовый пример Вот так:

<div>
  <h5>Nuværende kurser</h5>
  <div>
    <div>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

Теперь проблема в том, что он не добавляет полосу прокрутки, а просто расширяет веб-сайт до ширины таблицы.

Смотрите скриншот здесь:

Я видел, как он работает на нескольких других сайтах, так что что-то я ошибаюсь.

html twitter-bootstrap twitter-bootstrap-3 responsive-design html-table
Поделиться Источник Daniel Olsen     15 октября 2014 в 23:53

10 ответов

  • Bootstrap 3 table-responsive не работает

    Я тестирую локальный сайт в своем телефоне (Lumia 920), сайт Bootstrap 3 показывает OK, но когда я получаю доступ к своему локальному сайту, моя таблица не выглядит отзывчивой. Я даже попробовал использовать пример кода начальной загрузки страницы.. Вот мой код: <!DOCTYPE html> <html…

  • Bootstrap 3 table-responsive не работает в fieldset в мобильном браузере

    Я создаю веб-приложение и обнаружил, что если я использовал fieldset, а затем table responsive, то горизонтальная прокрутка появляется на странице с разрешением (320*480)., если я удалил fieldset, то он работал нормально . Я хочу, чтобы они оба были на моей странице. Я также попытался поместить….


52

Замените свой table-responsive на этот

<div> -> <div>

Поделиться Savan Kachhiya Patel     17 октября 2014 в 11:32


17

Обязательно установите блок отображения таблицы

.table {
   display: block !important;
}

Поделиться Hamza AVvan     17 февраля 2017 в 15:12


7

Bootstrap table-responsive отлично работает в песочнице, но в живых средах он глючит. Причина ошибки заключается в том, что bootstrap дает адаптивные к таблице стили width: 100% и overflow-y: hidden. Эти два стиля плохо сочетаются друг с другом. Скрытие переполнения лучше всего работает, когда есть фиксированная или максимальная ширина. Я дал table-responsive максимальную ширину: 270px; для мобильных устройств, и это исправило ошибку.

Поделиться Nate Levine     14 августа 2015 в 15:40

  • Bootstrap responsive table не прокручивается горизонтально на устройствах iOS

    У меня есть таблица со следующим markup: <div class=table-responsive <table class=table table-hover <!— table data—> </table> </div> Как говорится в документации, теперь моя таблица должна иметь возможность прокручиваться горизонтально. Это действительно работает, если я…

  • Как заставить класс jquery datatable использовать bootstrap table-responsive?

    У меня есть jquery datatable, и я знаю, что к нему есть плагин responsive, но мне не нравится его поведение так же, как класс bootstrap table-responsive. Я должен был бы просто обернуть свой jquery datatable в div с этим классом, но это, похоже, не работает для меня. Я в основном хочу, чтобы…


3

С тобой все в порядке. Я только что установил здесь fiddle .

Работает там!

Я буквально скопировал и вставил ваш код. Вы уверены, что ваши ссылки на файлы Bootstrap Javascript и CSS работают?

<div>
 <h5>Nuværende kurser</h5>
  <div>
   <div>
    <table>
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->

Поделиться ben.kaminski     16 октября 2014 в 00:04


3

Я сделал это.

<div>
    <div>
        <div>


            <div>
                <div>
                    <div>


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table>
                           <tr>
                               <td>


                                  //SCROLL
                                  <div>

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table>

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

Вы получите на xs-экране (пример из моего приложения):

Поделиться Evgeniy Miroshnichenko     13 мая 2017 в 15:37


2

У меня была эта проблема, и я обнаружил, что она работает либо для того, чтобы дать таблице заданную ширину в px, либо для того, чтобы установить таблицу для отображения: block.

Поделиться Andrew Dant     12 апреля 2017 в 14:28


0

Вы можете использовать FooTable. Это плагин jQuery, который позволяет вам изменять размер и перераспределять данные в ваших таблицах, чтобы наилучшим образом соответствовать вашей текущей точке останова.

Поделиться fatihdemir     08 марта 2016 в 20:21


0

Для меня это было значение ‘min-width’ в элементе body, нарушающее отзывчивость этого класса.

Поделиться tahaerden     01 декабря 2017 в 16:11


-1

Попробуйте это
удалить <div>...</div>
и переместить класс table-responsive в
<div>

пример

<div>

это 100% работа, но если не работает переместить таблицу классов-реагирует на более ранний слой Div, В этом случае
<div>
должен быть удален.

Поделиться mohammad reza Batooei     16 июня 2016 в 05:47


-1

В своем коде я действительно добавил класс CSS:

.modal-body{
  max-width:95vw;
}

Макет действительно работал для sm

Поделиться Esteban Andrés Rodríguez Leiva     24 апреля 2019 в 16:43

Похожие вопросы:


Bootstrap 3 : table-responsive inside display:table-cell не работает

У меня есть сценарий, в котором у меня есть Bootstrap 3 table-responsive внутри 2 divs. Один div имеет значение display:table, а другой-diaplay:table-cell. Это, кажется, ломает отзывчивую таблицу….


Раскрывающийся список Bootstrap внутри таблицы не работает с. table-responsive

Вот ссылка на живой пример. http://www.codeply.com/идти/uBnL1bBs6v Из чего вы можете видеть, что выпадающий список обрезается, когда я применяю слой <div calss=table-responsive></div>…


Bootstrap 3 table-responsive background-color issue on iOS

У меня возникла проблема с таблицей Bootstrap 3-отзывчивой на iOS 7 (iPad4 на safari). Когда я загружаю веб-страницу с таблицей, она может показывать только 70% таблицы, а rest скрыт справа: Но…


Bootstrap 3 table-responsive не работает

Я тестирую локальный сайт в своем телефоне (Lumia 920), сайт Bootstrap 3 показывает OK, но когда я получаю доступ к своему локальному сайту, моя таблица не выглядит отзывчивой. Я даже попробовал…


Bootstrap 3 table-responsive не работает в fieldset в мобильном браузере

Я создаю веб-приложение и обнаружил, что если я использовал fieldset, а затем table responsive, то горизонтальная прокрутка появляется на странице с разрешением (320*480)., если я удалил fieldset,…


Bootstrap responsive table не прокручивается горизонтально на устройствах iOS

У меня есть таблица со следующим markup: <div class=table-responsive <table class=table table-hover <!— table data—> </table> </div> Как говорится в документации, теперь…


Как заставить класс jquery datatable использовать bootstrap table-responsive?

У меня есть jquery datatable, и я знаю, что к нему есть плагин responsive, но мне не нравится его поведение так же, как класс bootstrap table-responsive. Я должен был бы просто обернуть свой jquery…


Bootstrap datetimepicker issue inside a table-responsive class

Я использую этот ( https://github.com/Eonasdan/bootstrap-datetimepicker ) выбор даты и времени для своего веб-сайта, и когда вы открываете выбор datetime в классе table-responsive, он не показывает…


Что делает класс ‘table-responsive’ в bootstrap

Что это стол реагирует не на технологии Bootstrap. Я нашел в w3schools о table-striped, table-bordered и нескольких других определениях, но ничего о responsive


Я столкнулся с проблемой bootstrap table responsive

У меня возникли некоторые проблемы с адаптивностью таблицы bootstrap. Я попробовал здесь какой-то код https://codepen.io/arindamx01/pen/gJOqxK мне нужна полная видимая подсказка. Я пробовал без…

Bootstrap Бутстрап 4 Tables — таблицы


Базовая таблица Bootstrap 4

Базовая загрузочная таблица 4 имеет светлую обивку и горизонтальные разделители.

.table класс добавляет базовый стиль к таблице:

Чередующиеся строки

.table-striped класс добавляет к таблице зебра-полосы:

Граница таблицы

.table-bordered класс добавляет границы со всех сторон таблицы и ячеек:

Наведите строки

.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:

Черный/темный стол

.table-dark класс добавляет черный фон в таблицу:

Темный полосатый стол

Объединить .table-dark и .table-striped создать темный, полосатый стол:

Парящий темный стол

.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:

Таблица без границ

.table-borderless класс удаляет границы из таблицы:

Контекстные классы

Контекстные классы можно использовать для окраски всей таблицы ( <table> ), строк таблицы ( <tr> ) или ячеек таблицы ( <td> ).

Можно использовать следующие контекстные классы:

КлассОписание
.table-primaryСиний: указывает на важное действие
.table-successЗеленый: указывает на успешное или положительное действие
.table-dangerКрасный: указывает на опасное или потенциально отрицательное действие
.table-infoСветло-голубой: указывает нейтральное информативное изменение или действие
.table-warningОранжевый: указывает на предупреждение, которое может потребоваться внимание
.table-activeСерый: применение цвета наведения к строке таблицы или ячейке таблицы
.table-secondaryСерый: указывает на несколько менее важное действие
.table-lightСветло-серый фон таблицы или строки таблицы
.table-darkТемно-серый фон таблицы или строки таблицы

Цвета настольной головки

.thead-dark класс добавляет черный фон в заголовки таблицы, а .thead-light класс добавляет серый фон в заголовки таблицы:

Маленький столик

.table-sm класс делает таблицу меньше, сокращая заполнение ячеек пополам:

Адаптивные таблицы

.table-responsive класс создает адаптивную таблицу: горизонтальная полоса прокрутки добавляется к таблице на экранах, которые меньше, чем 992пкс Wide (при необходимости). При просмотре на что-либо больше, чем 992пкс широкий, нет никакой разницы:

Пример

<div>
  <table>
    …
  </table>
</div>

Вы также можете решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана:

КлассШирина экрана
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px

Пример

<div>
  <table>
    …
  </table>
</div>


jquery — Адаптивная таблица Bootstrap 3 с первым фиксированным столбцом

Я следил за этим и это сообщение, чтобы заблокировать ширину первого столбца. Таблица адаптивна, и я хочу добиться фиксированной ширины первого столбца при изменении размера таблицы. Я попробовал сообщение Guruprasad, но это не сработало.

jsfiddle

html 

<div>
    <table>
        <thead>
            <tr>
                <th>Number</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Second</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Third</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>

css 

.table>thead:first-child>tr:first-child>th:first-child
{
    position: absolute;
    display: inline-block;
    height:100%;
}
.table> tbody > tr > td:first-child
{
    position: absolute;
    display: inline-block;
    height:100%;

}
.table>thead:first-child>tr:first-child>th:nth-child(2)
{
    padding-left:40px;
}
.table> tbody > tr > td:nth-child(2)
{
    padding-left:50px !important;

}

2

Matt 26 Авг 2015 в 11:11

2 ответа

Лучший ответ

Я отредактировал вашу скрипку и сделал некоторые изменения, например, я удалил display:inline-block и положение и добавил ширину исправления для этого столбца, чтобы он остался там.

.table>thead:first-child>tr:first-child>th:first-child
{
    height:auto;
    width:100px; /*change according to your need*/
}

Для получения дополнительных сведений перейдите по этой ссылке.

2

Leo the lion 26 Авг 2015 в 09:20

<table>
</table>

0

user3497674 26 Авг 2015 в 08:32

Руководство Bootstrap 4 Tables — Hoow.ru

И наша таблица с отметками будет иметь черную строку заголовка, как показано ниже:

Это не все!!! С Bootstrap есть еще много возможностей. Создадим еще несколько вариаций.

Полосатая таблица позволяет создавать альтернативные цвета для строк. Просто добавьте «таблица с полосами» к существующему классу «таблица», и таблица будет иметь узор с полосами. Светло-серый цвет фона будет применен ко всем строкам с нечетными номерами, начиная с первой строки.

Полосатая таблица в основном предпочтительна для разделения строк и демонстрации контента посетителям.

Это просто добавит границу в таблицу по умолчанию. Что вам нужно, так это добавить класс «с рамкой таблицы» к существующему классу «таблица».

Наша таблица маркировки с рамкой должна выглядеть так:

Вы также можете легко создать таблицу с границами с полосами на строках.

Как насчет добавления эффектов наведения к вашей таблице? Класс «table-hover» сделает это за вас. Наведите указатель мыши на таблицу, чтобы увидеть, что соответствующая строка выделена светло-серым цветом фона.

Ниже показано, как ваша таблица должна выглядеть, когда вы наводите указатель мыши на вторую строку.

Создать адаптивную таблицу в Bootstrap 4 очень просто. Вам не нужно добавлять дополнительный

для повышения отзывчивости. Просто вставьте класс «реагирующий на таблицу», горизонтальная полоса прокрутки будет автоматически добавлена ​​к таблице при просмотре в браузере с размером экрана ниже 768 пикселей.таблица отзывчивый«>

Вот как будет выглядеть наша адаптивная таблица. Помните, что горизонтальная полоса прокрутки появится только тогда, когда таблица просматривается на экране размером менее 768 пикселей. В противном случае вы не найдете никакой разницы по сравнению с обычной таблицей Bootstrap.

Таблица начальной загрузки со сжатым текстом

Иногда бывает необходимо уменьшить высоту стола, чтобы уменьшить занимаемое пространство. Bootstrap позволяет сделать это, добавляя класс table-sm к существующему классу table, как показано ниже:

Это уберет набивку и уменьшит высоту стола.

Создание таблицы начальной загрузки с цветом фона

На данный момент мы обсудили создание простой таблицы или использование светло-серого фона по умолчанию для строк. Bootstrap также позволяет раскрашивать ячейки и строки таблицы, чтобы сделать ее красивой. Вы можете выделить любые строки или любые ячейки таблицы пятью разными цветами. Есть два набора классов CSS, которые помогут вам добавить цвета фона: один – это контекстные классы, а другой – вспомогательные классы фона. В таблице ниже описаны различные доступные варианты:

Таблица контекстных классов
таблица активнаСветло-серый цвет при наведении
таблица успехаСветло-зеленый успех или позитивное действие
информация о таблицеГолубой для информационного сообщения
таблица-предупреждениеСветло-желтый для индикации предупреждения
опасность за столомСветло-красный для обозначения опасности
таблица-первичныйГолубой для обозначения основного цвета в Bootstrap
стол вторичныйСветло-красный для обозначения опасности
настольная лампаСветло-серый для обозначения отсутствия цвета
стол-темныйСветло-черный для обозначения темноты
Фоновая служебная программа / контекстные классы
bg-primaryСредний синий как основной цвет
bg-успехЗеленый лес для успеха
bg-предупреждение Свобода слова зеленого цвета для предупреждения
bg-infoСветло-зеленый для информации
bg-опасностьКрасный (Киноварь) для опасности
bg-lightОдиночество для света
bg-darkЦвет Mirage для темноты
bg-вторичныйЦвет алюминия для вторичного

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

Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.

Цветные строки с контекстными классами

Давайте применим контекстные классы в нашей таблице оценок, чтобы увидеть их в действии. Код ниже применяет класс «table-active» к первой строке таблицы, чтобы изменить цвет фона на светло-серый.

class = “table-active”>
Томас 80 90 70 80 75 79

Ниже показано, как будет выглядеть полная таблица, когда вы примените классы «table-success», «table-warning» и «table-dangerous» ко второму, третьему и четвертому элементам

таблицы.

Цветные строки с цветами фона

Как и в случае с контекстными классами таблиц, вы можете применять цвета фона к строкам с помощью контекстных классов фона.

class = “bg-success”>
Томас 80 90 70 80 75 79

Ниже приведена привлекательная таблица, в которой к строкам применяются классы «bg-success», «bg-dangerous», «bg-warning», «bg-info» и другие служебные классы фона.

Цветные ячейки с контекстными классами

К каждой ячейке таблицы Bootstrap можно применить один из контекстных классов, чтобы выделить его из других ячеек. Это будет действительно полезно, когда у вас большая таблица и вы хотите выделить только несколько ячеек. Код ниже показывает применение контекстного класса «table-active» к ячейке таблицы.

Томасclass = “table-active”> 80 90 70 80 75 79

В таблице ниже четыре ячейки с разными цветами фона применены случайным образом.

Цветные строки и ячейки с фоновыми цветами и контекстными классами

Наконец, вы можете применить контекстный класс таблицы и контекстный класс фона в любой комбинации, чтобы сделать разные цвета фона для строк и ячеек.

class = “table-active”>
Томасclass = “информация о таблице”> 80 90 70 80 75class = “bg-success”> 79

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

You may also like

Делаем адаптивную таблицу несколько примеров

Сейчас адаптивность сайта играет важную роль. Ведь все больше пользователей заходят в интернет со смартфонов и планшетов. Одной из проблем для верстальщиков являются табличные данные, так как табличная верстка не предназначена для адаптации. Как же быть, если без таблиц на сайте не обойтись?

В этом уроке мы рассмотрим один способ адаптации таблицы. Зачастую заголовки таблицы располагаются сверху горизонтально. Мы на маленьких экранах будем их располагать вертикально, а для ячеек с даннями будем добавлять горизонтальную прокрутку, при этом заголовки будут оставаться на месте.

Для создания такой адаптивной таблицы нам понадобиться только css. Html cструктура нашей таблицы должна выглядеть следующим образом:


<table>
    <thead>
        <tr>
            <td>head1</td>
	...
        </tr>
    </thead>	
    <tbody>
        <tr>
            <td>content1</td>
	...
        </tr>             
    </tbody>  
</table>

Теперь рассмотрим наши css свойства. Будем использовать медиа-запрос @media для создания правил для маленьких экранов.


@media only screen and (max-width: 760px) {…}

Чтобы разместить шапку слева, а тело слева. Зададим им отображение со свойствами блочных элементов и зададим шапке обтекание слева.


table { display: block;}
thead { display: block; float: left; }
tbody { display: block;}

 

Для отдельных ячеек таблицы зададим свойство td { display: block;}, чтобы расположить их друг под другом. А для строк тела таблицы добавим свойство tbody tr { display: inline-block; }

 

Чтобы наши столбцы не перескакивали вниз добавим для tbody свойство white-space: nowrap; , ну и чтобы можно было видеть не помещающиеся столбцы добавим нашему tbody скрол используя свойство overflow-x: auto;

У нас получился такой набор css свойств для адаптивной таблицы:


@media only screen and (max-width: 760px) {
    	table { display: block;  }
	thead { display: block; ; float: left; }
	tbody { display: block; white-space: nowrap; overflow-x: auto; }
    	td{display: block; }
	tbody tr { display: inline-block; }
}

Можно объединить свойства и чуть сократить код:


@media only screen and (max-width: 760px) {
    	table, thead, tbody, td { display: block;  }
	thead { float: left; }
	tbody { white-space: nowrap; overflow-x: auto; }
	tbody tr { display: inline-block; }
}

Ну и вот готовый пример адаптивной страницы с использованием css:

head1 head2 head3 head4 head5
content1 content2 content3 content4 content5
content1-2 content2-2 content3-2 content4-2 content5-2
content1-3 content2-3 content3-3 content4-3 content5-3
content1-4 content2-4 content3-4 content4-4 content5-4

Ну и можете посмотреть готовый код этой таблицы:


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    table{
        border: 2px solid black;
        border-collapse: collapse;
        width: 100%;
    }    
    thead{
        background: #333; 
        color: white;
        font-weight: bold;
    }
    table td{
       padding: 5px;
       border: 1px solid #c0c0c0; 
    }
    @media only screen and (max-width: 760px) {

	table { border-collapse: collapse; border-spacing: 0; border: none; }
 	td { margin: 0; vertical-align: top; }
	table { display: block; position: relative; }
	thead { display: block; float: left; }
	tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	thead tr { display: block; }
	tbody tr { display: inline-block; vertical-align: top; }
	td { display: block; text-align: left; }
}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>head1</td>
                <td>head2</td>
                <td>head3</td>
                <td>head4</td>
                <td>head5</td>
            </tr>
         </thead>
         <tbody>
                <tr>
                    <td>content1</td>
                    <td>content2</td>
                    <td>content3</td>
                    <td>content4</td>
                    <td>content5</td>
                </tr>
                <tr>
                    <td>content1-2</td>
                    <td>content2-2</td>
                    <td>content3-2</td>
                    <td>content4-2</td>
                    <td>content5-2</td>
                </tr>
                <tr>
                    <td>content1-3</td>
                    <td>content2-3</td>
                    <td>content3-3</td>
                    <td>content4-3</td>
                    <td>content5-3</td>
                </tr>
                <tr>
                    <td>content1-4</td>
                    <td>content2-4</td>
                    <td>content3-4</td>
                    <td>content4-4</td>
                    <td>content5-4</td>
                </tr>
         </tbody>  
    </table>
</body>
</html>

——————————————————————————

Если у вас появились вопросы, хотели бы записаться на урок, заказать статью(инструкцию) или приобрести видеоурок — пишите нам в: скайп: olegg.pann telegram, viber,whatsap — +380672998330 добавляйтесь на телеграмм-канал: t.me/webyk email: [email protected] мы в vk: vk.com/programing24 мы в fb: www.facebook.com/webprograming24 Обязательно оперативно ответим на все вопросы


Поделитесь в социальных сетях