Адаптивные таблицы css: Адаптивные таблицы в вебе / Хабр

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

Содержание

Как сделать адаптивную структуру таблицы или колонок для сайта? — Вопрос от Руслан Ельдеев

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16541)
  • Платные услуги (2136)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1434)
  • Редактор страниц (236)
  • Новости сайта (500)
  • Каталоги (808)
  • Блог (дневник) (112)
  • Объявления (295)
  • Фотоальбомы (433)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2456)

Управление сайтом

  • Работа с аккаунтом (5332)
  • Поиск по сайту (427)
  • Меню сайта (1766)
  • Домен для сайта (1535)
  • Дизайн сайта (13475)
  • Безопасность сайта (1484)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (318)
  • Статистика сайта (198)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)
  • PHP и API на uCoz (235)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (429)
  • Софт для вебмастера (39)
  • Вопросы
  • Вопросы новичков
  • Как сделать адаптивную…

голоса: 0

 

Лучший ответ

| Автор: Yuri_Geruk
Выбор ответа лучшим | | Автор: Yuri_Geruk

…

Адаптивная таблица 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>:

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

Шаг 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>

Шаг 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>

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

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

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

Magento HTML/CSS: адаптивная таблица – 1 Ответ Задавать вопрос

спросил

Изменено 1 год, 3 месяца назад

Просмотрено 328 раз

Я пытаюсь создать таблицу, используя элемент кода HTML в Magento. Я пытался использовать адаптивные типы мультимедиа, но на мобильных устройствах они все равно выходят за пределы экрана.

Адаптивная таблица Magento для мобильных устройств