За всеки дизайнер на оформление не е тайна, че таблиците са зли. Те са трудни за адаптиране и персонализиране. Ако на настолната версия на сайта все още е доста лесно да нарисувате маса, тогава когато започне адаптивното оформление, всичко отива по дяволите.
Всъщност една от най-ефективните опции е да създадете хоризонтално превъртане за таблицата. Лесно е да се направи, но днешната публикация не е за това. Все пак ще ви покажа.
Първият начин за адаптиране
| <div class = "table-wrap"> <таблица> <thead> <tr> <th>Обслужване</ th> <th>Описание</ th> <th>Цена</ th> <th>Отстъпка</ th> </ tr> </ thead> <tbody> <tr> <td>Мобилно оформление</ td> <td>Оформление за телефони</ td> <td>$3000</ td> <td> 50%</ td> </ tr> <tr> <td>Кацане на CMS WordPress</ td> <td></ td> <td>$3000</ td> <td> 30%</ td> </ tr> </ tbody> </ таблица> </ div> |
| Обслужване | Описание | Цена | Отстъпка |
|---|---|---|---|
| Мобилно оформление | Оформление за телефони | $3000 | 50% |
| Кацане на CMS WordPress | Изработка на уеб сайт с администратор. панел | $3000 | 30% |
Оформяне на цялото това нещо (основно трябва да стилизираме маса-обвивка).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .table-wrap (text-wrap: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: # 000;) .table-wrap (overflow-y: scroll;)) |
Обвиване на таблица (подравняване на текст: център; дисплей: inline-block; цвят на фона: #fff; padding: 2rem 2rem; цвят: # 000;) @ медиен екран и (макс. ширина: 600 пиксела) (.table-wrap (препълване-y: превъртане;))
В резултат на това таблицата ще превърта до 600 пиксела ширина, но сайтът не. Удобно, но днес бих искал да говоря за нещо друго.
Намерих друг интересен подход към отзивчивостта на таблицата. Той използва атрибути на данни и псевдокласове. Сега ще ви покажа всичко.
Вторият начин на адаптация
Първо, нека променим маркирането:
| 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 |
|
| Обслужване | Описание | Цена | Отстъпка |
|---|---|---|---|
| Мобилно оформление | Оформление за телефони | $3000 | 50% |
| Кацане на CMS WordPress | Изработка на уеб сайт с администратор. панел | $3000 | 30% |
Дайте на всяка колона атрибут етикет за данни, които ще ни бъдат полезни в бъдеще.
Ние задаваме основните стилове:
| 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 42 43 44 45 | тяло (подравняване на текста: център; padding-top: 10%; семейство шрифтове: sans-serif; background-image: url ("bg.jpg"); фон-размер: корица; височина: 100vh; цвят: #fff ;) .table-wrap (text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: # 000;) table (border: 1px плътно #ccc; ширина: 100% ; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0;) table tr (border: 1px solid #ddd; padding: 5px;) table th, table td (padding: 10px; text-align : център; граница вдясно: 1px плътно #ddd;) таблица th (цвят: #fff; фон-цвят: # 444; трансформация на текст: главни букви; размер на шрифта: 14px; разстояние между буквите: 1px;) |
тяло (подравняване на текста: център; padding-top: 10%; семейство шрифтове: sans-serif; background-image: url ("bg.jpg"); фон-размер: корица; височина: 100vh; цвят: #fff ;) .table-wrap (text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: # 000;) table (border: 1px плътно #ccc; ширина: 100% ; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0;) table tr (border: 1px solid #ddd; padding: 5px;) table th, table td (padding: 10px; text-align : център; граница вдясно: 1px плътно #ddd;) таблица th (цвят: #fff; фон-цвят: # 444; трансформация на текст: главни букви; размер на шрифта: 14px; разстояние между буквите: 1px;)
Изглежда като обикновена таблица, разбира се, измествайки сайта с 320-420 пиксела, ще видим хоризонтално превъртане на целия сайт. Не е въпросът.
Как да го оправя? добавяне на стилове:
| 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 | @медиен екран и (максимална ширина: 600 пиксела) ( table (border: 0;) table thead (display: none;) table tr (margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd;) table td (display: block; text-align: right ; font-size: 13px; border-bottom: 1px с точки #ccc; border-right: 1px плътно прозрачен;) table td: last-child (border-bottom: 0;) table td: before (content: attr (data- етикет); float: вляво; преобразуване на текст: главни букви; тегло на шрифта: удебелен;)) |
@media screen and (max-width: 600px) (table (border: 0;) table thead (display: none;) table tr (margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd;) таблица td (display: block; text-align: right; font-size: 13px; border-bottom: 1px pointed #ccc; border-right: 1px solid transparent;) table td: last-child (border-bottom: 0; ) таблица td: преди (съдържание: attr (етикет за данни); float: вляво; преобразуване на текст: главни букви; тегло на шрифта: удебелен;))
Тук направихме редовете на таблицата блокирани, премахнахме имената на колоните и оправдахме текста на самите колони. От своя страна, с помощта на псевдо-класа : прединие добавяме нашите атрибути за дата вляво. Оказва се така: 
Ето още една химикалка:
Както можете да видите, превърнахме редовете на таблицата в малък блок, който съдържа цялата информация. Мисля, че тази опция за адаптиране към таблицата е добра за малки маси. Използвайте го, приятели!
В Aspro: След това, започвайки с версия 1.1.7, можете да адаптирате таблици за мобилната версия. Необходимо е да направите промени в изходния код на страницата - да добавите клас, който отговаря за адаптивността на таблиците.
Една проста таблица в мобилната версия се простира отвъд страницата.
За да направите таблицата адаптивна, отидете на редактиране на страницата, където е добавена таблицата. След това отидете в режим на редактиране на източник.
Преди отварящия етикет
