wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Html как сделать адаптивную таблицу: Создаем адаптивную сводную таблицу

alexxlab
No Comments

Содержание

Делаем простые адаптивные таблицы на минимальном CSS

Сложно представить сайт без таблиц. Существует вагон и маленькая тележка способов реализации адаптивного вывода таблиц. Можно использовать готовые фреймворки, разную экзотику на JS, но разумнее всего делать таблицы на CSS. На нем и рассмотрим парочку боевых примеров.

Сразу отмечу, решение не мое, а известного канадского веб-разработчика Брэдли Таунта.

1. Разрешить скроллинг таблиц

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

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

table {
    min-width: 800px; /* Set your desired min-width here */
}
Получится так:
Многие этим и ограничиваются, но можно пойти дальше.
2. Добавить гибкости
В основе решения лежат флексбоксы со всеми вытекающими приятными последствиями.
/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
    /* Hide the table headings */
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* Removes double-borders */
        width: 50%;
    }
}
На выходе получаем такое:
В примере выше заголовки таблицы скрыты, чтобы не засорять ее. Но мы можем вывести и их. Например, так:
/* Default span styling - hidden on desktop */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

/* Simple CSS for flexbox table on mobile */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* additional padding to avoid heading overlap */
        position: relative;
        width: 50%;
    }
    /* Show the heading span */
    table td span {
        display: block;
    }
}
Как видим, способы сильно отличаются. И здесь важно понимать в контексте конкретного проекта, что использовать: молоток или отвертку.
Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.
Как легко адаптировать HTML-таблицу под мобильные устройства?
На сегодняшний день HTML-таблицы утратили свою популярность в верстке элементов дизайна и были заменены блоками (header, menu, div, footer и др.), но они до сих пор применяются в области структуризации и представлении данных пользователям.
Часто, вставленная таблица в тело документа, не адаптирована под мобильные устройства, если это не было определено заранее в правилах CSS. Получается, что адаптивная верстка будет подстраиваться под границы экрана, а таблица может только сжиматься, оставляя некоторую область за пределами дисплея.
Этот материал касается простых таблиц без заголовков, с ячейками, содержащими только основную информацию. Более сложный вариант рассматривается в следующем уроке.
Создадим таблицу с перечислением некоторых цветов каталога Pantone в каждой из 6-и ячеек.
PANTONE 224PANTONE 225PANTONE 226PANTONE 227PANTONE 228PANTONE 229
HTML-код:
<table>
<tbody>
<tr>
<td>PANTONE 224</td>
<td>PANTONE 225</td>
<td>PANTONE 226</td>
<td>PANTONE 227</td>
<td>PANTONE 228</td>
<td>PANTONE 229</td>
</tr>
</tbody>
</table>
CSS-код:
table.pantone {width: 100%; border-collapse: collapse;}
table.pantone td {padding: 0.6rem 1rem; color: #ffffff; font-weight: bold;}
С помощью изображения приведу то, как будет выглядеть полноценная таблица при фиксированной ширине 1140 пикс.
А теперь вид таблицы с уменьшенным разрешением экрана, которое используется в мобильных устройствах.
Видим, что вся информация, представленная в таблице, не входит в область экрана. Добавим к ячейкам правило CSS:
@media screen and (max-width: 800px) {
  table.pantone td {display: block;}
}
Это значит, что при разрешении экрана менее 800 пикс., ячейки таблицы станут блоками, выстраиваясь сверху вниз.
Таким образом, мы рассмотрели, как легко привести табличный формат к адаптивному дизайну.
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1Ячейка 2×2Ячейка 2×3
Ячейка 3×1Ячейка 3×2Ячейка 3×3
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1Ячейка 2×2Ячейка 2×3
Ячейка 3×1Ячейка 3×2Ячейка 3×3
Свойство border следует устанавливать как для самой таблицы <table> так и для её ячеек <th> и <td>.
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1Ячейка 2×2Ячейка 2×3
Ячейка 3×1Ячейка 3×2Ячейка 3×3
padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
border-spacing — это расстояние между ячейками (зеленый цвет)
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
Ячейка на два столбца
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
Ячейка на две строкиЯчейка 1Ячейка 2
Ячейка 3Ячейка 4
Это заголовок таблицы
Ячейка на две строкиЯчейка 1Ячейка 2
Ячейка 3Ячейка 4
Это шапка таблицы
Это подвал таблицы
Ячейка 1Ячейка 2Ячейка 3Ячейка 4
  • Ячейка на два столбца
    Ячейка 1Ячейка 2
  • Ячейка на три строкиЯчейка 1
    Ячейка 2
    Ячейка 3
  • фурмаананасыперсики
    бананыгруши
    авокадо
 Имя Фамилия Очков Очков Очков Очков Очков Очков Очков Очков Очков Очков Очков Очки Очков Очки Очков Очков Очков Очки Очков
 Джилл Смит 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
 Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
 Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67