Форум Сайтостроение Веб-строительство

CSS: Responsive tables

MrDesigner
На сайте с 31.01.2008
Offline
193
MrDesigner
277

Скажите, будет ли валидна такая структура вёрстки адаптивной таблицы? 

/* Responsive tables */

.table-recipes {

  width: 100%;

  overflow: auto;

  -webkit-overflow-scrolling: touch;

}


<div class="table-recipes">

<table>

...

</table>

</div>

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

Спасиб!

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#1

MrDesigner, да. Для наглядности, обычно я еще добавляю иконку горизонтального скроллинга вверху таблиц :


@media screen and (max-width: 720px) {
.table-recipes {
    position: relative;
    padding-top: 38px;
}
.table-recipes:before {
    content: "";
    display: block;
    width: 36px;
    height: 28px;
    background: url(тут_ссылка_на_иконку);
    position: absolute;
    right: 10px;
    top: 0;
}
}
png scrollx.png

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий