{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет! Решил начать вести еще и Яндекс.Дзен. И начну его вести с самой популярной статьи в своем блоге - о создании адаптивной таблицы на css.","type":"unstyled","key":"e11pk"},{"data":{"image":{"id":"5cb99f2f43fdf300b2a53765"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3u4fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В наше время таблицы, слава богу, используются довольно редко. Но там, где в макете реально таблица - конечно нужно использовать ее. И сегодня я покажу, как именно сделать ее адаптивной на телефонах\\маленьких планшетах. Хотя там вы сможете уже для себя подстроить как хотите данный метод.","type":"unstyled","key":"atv6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3sndv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, для начала создаем разметку. Она вполне себе тривиальная (не переживайте если не очень хорошо ее видно - в конце статьи будет ссылка на codepen). Единственное, что бросается в глаза явно - это конечно наличие data-label. Они очень нужны для грамотной работы данного метода.","type":"unstyled","key":"cebk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fb9pa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"f9iop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"ak40h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"e6uqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1mvjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"47g47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"2vfb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"elh1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"dvljc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"f23i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7n44e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"14t1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1s3qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"du0o9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"5h44p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"bb8c6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"dhicu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"2h2ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"fvi3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"8cmvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"6kd54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1m9nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"95kl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"9g3n0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Услуга	Описание	Цена	Скидка
Мобильная верстка	Верстка под телефоны	$3000	50%
Посадка на CMS WordPress	Создание сайта с админ. панелью	$3000	30%

","type":"blockquote","key":"ftpod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2l1j2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4a87l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разметку создали, теперь стоит обратиться к стилям. Сперва обычные стили:","type":"unstyled","key":"103p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {","type":"blockquote","key":"6gl3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"bv71r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding-top: 10%;","type":"blockquote","key":"aeutu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-family: sans-serif;","type":"blockquote","key":"e5mmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-image: url('bg.jpg');","type":"blockquote","key":"etbvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-size: cover;","type":"blockquote","key":"aq4q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"ekbi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: #fff;","type":"blockquote","key":"dvpt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"3fp9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"e26e8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".table-wrap {","type":"blockquote","key":"3q0o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"6vh6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: inline-block;","type":"blockquote","key":"5m91a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #fff;","type":"blockquote","key":"fhsqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 2rem 2rem;","type":"blockquote","key":"58g1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: #000;","type":"blockquote","key":"652a1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4kode"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1cubm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table {","type":"blockquote","key":"8n3vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 1px solid #ccc;","type":"blockquote","key":"5r8dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100%;","type":"blockquote","key":"94l18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin:0;","type":"blockquote","key":"7p1nr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding:0;","type":"blockquote","key":"16n0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-collapse: collapse;","type":"blockquote","key":"8mp7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-spacing: 0;","type":"blockquote","key":"30m13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"8c5r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"45rgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table tr {","type":"blockquote","key":"dm6o2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 1px solid #ddd;","type":"blockquote","key":"6gjj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 5px;","type":"blockquote","key":"c07q4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"fltcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"cr6d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table th, table td {","type":"blockquote","key":"5l57e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 10px;","type":"blockquote","key":"ffauq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"7i0t3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-right: 1px solid #ddd;","type":"blockquote","key":"754qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"8i5oj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4prsr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table th {","type":"blockquote","key":"dl3vo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: #fff;","type":"blockquote","key":"8nm5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #444;","type":"blockquote","key":"904u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-transform: uppercase;","type":"blockquote","key":"6frct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 14px;","type":"blockquote","key":"b01u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" letter-spacing: 1px;","type":"blockquote","key":"84jv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"6mgsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c7co9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это просто стили для таблицы, чтобы она смотрелась красивее. Вся магия будет дальше.","type":"unstyled","key":"3vcof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":89,"style":"BOLD"}],"text":"Но, кстати, если заказчика устраивает - есть еще вариант. Просто задать родителю таблицы overflow-x: scroll. Тогда по факту весь сайт будет нормально выглядеть, но в местах таблицы ее можно скроллить. ","type":"unstyled","key":"17eef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако наша магия будет круче:","type":"unstyled","key":"99jab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media screen and (max-width: 600px) {","type":"blockquote","key":"6tgcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table {","type":"blockquote","key":"dq4ei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 0;","type":"blockquote","key":"1s74a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"2k8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table thead {","type":"blockquote","key":"9llmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: none;","type":"blockquote","key":"e9n30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"520ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table tr {","type":"blockquote","key":"8l7ks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin-bottom: 10px;","type":"blockquote","key":"dnuo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: block;","type":"blockquote","key":"a2n8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-bottom: 2px solid #ddd;","type":"blockquote","key":"bsqj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"3mlae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table td {","type":"blockquote","key":"fvpbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: block;","type":"blockquote","key":"a4thk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: right;","type":"blockquote","key":"8eslh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 13px;","type":"blockquote","key":"1aj24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-bottom: 1px dotted #ccc;","type":"blockquote","key":"37eeh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-right: 1px solid transparent;","type":"blockquote","key":"bbl0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"enr54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table td:last-child {","type":"blockquote","key":"6nske"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-bottom: 0;","type":"blockquote","key":"1adh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"3h4s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" table td:before {","type":"blockquote","key":"l8m2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" content: attr(data-label);","type":"blockquote","key":"22gck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" float: left;","type":"blockquote","key":"efv5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-transform: uppercase;","type":"blockquote","key":"9jqks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-weight: bold;","type":"blockquote","key":"fl59l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"44vge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"bbog2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8rcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полностью скрываем thead, и вместо него показываем как раз наши data-label (благо свойство content у псевдоэлементов это позволяет прекрасно).","type":"unstyled","key":"4q3kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тем самым мы получим красивую таблицу на экранах шириной меньше 600 пикселей. Очень просто)","type":"unstyled","key":"8algd"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":38,"offset":1}],"inlineStyleRanges":[],"text":" https://codepen.io/MaxGraph/pen/gyxqpB - тут есть живой пример, где можно все посмотреть.","type":"unstyled","key":"4jr8r"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":71,"offset":1}],"inlineStyleRanges":[],"text":" https://blog.maxgraph.ru/2017/10/26/adaptivnaya-tablica-na-chistom-css/ - в моем блоге более детально описано все + есть тот вариант с overflow, о котором я говорил. Переходите и смотрите)","type":"unstyled","key":"2vjc5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6q9e5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, статья была полезна, и успехов Вам в освоении этого метода!","type":"unstyled","key":"auf3c"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":25,"offset":1}],"inlineStyleRanges":[],"text":" https://blog.maxgraph.ru/ - подписывайтесь на блог и на канал в Яндекс.Дзен, чтобы не пропустить все самое интересное :)","type":"unstyled","key":"82j64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ldW0YqjQ5oXrZbkMKTcw"}],"entityMap":{"0":{"data":{"href":"https://codepen.io/MaxGraph/pen/gyxqpB","url":"https://codepen.io/MaxGraph/pen/gyxqpB"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://blog.maxgraph.ru/2017/10/26/adaptivnaya-tablica-na-chistom-css/","url":"https://blog.maxgraph.ru/2017/10/26/adaptivnaya-tablica-na-chistom-css/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://blog.maxgraph.ru/","url":"https://blog.maxgraph.ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}