Таблиці є основною частиною лендингів та сайтів, на яких пропонують цифрові або інші платні послуги. Хоч вони і мають свій якийсь шаблонний вигляд - можливостей для їх оформлення дуже багато...
Епоха мобільних пристроїв диктує свої правила. Якщо раніше таблиці html, як правило, бачили користувачі персональних комп'ютерів, то зараз, в першу чергу, потрібно подбати про те, щоб ці таблиці відображалися коректно і на смартфонах і планшетах.
Приклад реалізації адаптивних таблиць за допомогою списків з застосуванням Flexbox
Розмітка HTML
Розмітка максимально чиста та мінімалістична. у пркладі використано зовнішній основний елемент DIV, а потім серію списків UL для відображення кожного «рядка» вмісту в таблиці порівняння:
Важливою є порівняльна таблиця, що складається з кількох UL, поставлених один проти одного. Викорстано flex box CSS, щоб зробити їх однаковими по ширині, а також розширити та стиснути з однаковою швидкістю, щоб вони вели себе так само, як і рядки в таблиці.
<div class="comparisontable"><ul class="row">
<li class="legend">Office Chairs</li>
<li><img src="Eurotech-chair.jpg" /><br />Eurotech</li>
<li><img src="Hbada-chair.jpg" /><br />Hbada</li>
<li><img src="Zenith-chair.jpg" /><br />Zenith</li>
<li><img src="amazonbasics-chair.jpg" /><br />Amazonbasics</li>
</ul>
<ul class="row">
<li class="legend">Weight</li>
<li>25kg</li>
<li>13kg</li>
<li>17kg</li>
<li>28kg</li>
</ul>
<ul class="row">
<li class="legend">Cost</li>
<li>$$</li>
<li>$</li>
<li>$$</li>
<li>$</li>
</ul>
<ul class="row">
<li class="legend">Delivery</li>
<li>Domestic</li>
<li>International</li>
<li>International</li>
<li>Domestic</li>
</ul>
<ul class="row">
<li class="legend">Verdict</li>
<li>Best Chair for Back Pain</li>
<li>Best budget chair</li>
<li>All Mesh for Cooling</li>
<li>Only Chair with Top Grain Leather</li>
</ul>
<ul class="row">
<li class="legend"></li>
<li><a href="" class="calltoaction">Buy Now</a></li>
<li><a href="" class="calltoaction">Buy Now</a></li>
<li><a href="" class="calltoaction">Buy Now</a></li>
<li><a href="" class="calltoaction">Buy Now</a></li>
</ul>
</div>
Першим елементом li в кожній ul є функція/легенда. Щоб легко ізолювати та стилізувати їх інакше, ніж решту пакета, цим елементам присвоєно li клас CSS .legend
CSS:
Далі потрібно перетворити розмітку в порівняльну таблицю. Використовуючи CSS Flexbox, відносно легко трансформувати елементи UL, щоб вони були горизонтальними в макеті, згинаючись і розтягуючи разом, щоб вони вели себе як клітинки таблиці.
Деякі непотрібні рядки видалені, щоб можна було зосередитися на важливих частинах нижче:
div.comparisontable{display: flex;
flex-direction: column; /* turn children ul elements into stacked rows */
}
div.comparisontable ul.row{
list-style: none;
display: flex; /* turn children li elements into flex children */
flex: 1;
flex-wrap: wrap;
}
div.comparisontable ul.row li{
background: #c9f4ca;
flex: 1;
padding: 10px;
border-bottom: 1px solid gray;
}
/* the legend column (first li within each row) */
div.comparisontable ul.row li.legend{
background: #6640d8;
color: white;
border: none;
width: 200px;
border-bottom: 1px solid white;
}
/* very first row */
div.comparisontable ul.row:first-of-type li{
text-align: center;
}
/* very last row */
div.comparisontable ul.row:last-of-type li{
text-align: center;
border-bottom: none;
box-shadow: 0 6px 6px rgba(0,0,0,0.23);
}
/* first and last cell within legend column */
div.comparisontable ul.row:first-of-type li.legend.legend,
div.comparisontable ul.row:last-of-type li.legend{
background: transparent;
box-shadow: none;
}
"Список функцій" або стовпець легенди є першим елементом li кожного рядка. Він має явну ширину 200 пікселів, на відміну від інших елементів li, які мають гнучку ширину (flex: 1).
Наступне завдання зробити таблицю адаптивною, тому що «стовпці» в кожному рядку залишаються поруч, навіть якщо розмір екрана стає дуже малим.
У flex box CSS можна легко змінити порядок відображення дочірніх елементів flex з поведінки за замовчуванням «рядок» на «колонку», встановивши властивість flex-direction з «row» на « column".У даній таблиці порівняння самі елементи ul стоять в один ряд, хоча дочірні елементи li з’являються поруч, як клітинки в таблиці. Їх потрібно змінити так, щоб вони також складалися, коли екран стане досить малим:
@media screen and (max-width:650px){
div.comparisontable ul.row{
flex-direction: column;
}
div.comparisontable img{
width: auto;
height: auto;
}
div.comparisontable ul.row li{
margin-right: 0;
width: auto;
flex: auto;
}
/* first and last cell within legend column */
div.comparisontable ul.row:first-of-type li.legend.legend,
div.comparisontable ul.row:last-of-type li.legend{
display: none;
}
div.comparisontable ul.row li.legend{
width: auto;
}
}
Існує невелика проблема з таблицею: при зміні розміру, на певних розмірах екрану, ширина деяких li стає дещо несинхронізованою:
See the Pen Responsive Comparison Table using CSS Flexbox by georgec (@georgec) on CodePen.
Приклад реалізації адаптивної таблиці за допомогою тега <table> з застосуванням Flexbox
See the Pen Responsive Table Flexbox by Bruno Santos (@brnms) on CodePen.
v