Разное

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

Содержание

Делаем простые адаптивные таблицы на минимальном 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 224 PANTONE 225 PANTONE 226 PANTONE 227 PANTONE 228 PANTONE 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 пикс., ячейки таблицы станут блоками, выстраиваясь сверху вниз.

Таким образом, мы рассмотрели, как легко привести табличный формат к адаптивному дизайну.