Таблицы
Полосатая таблица с цветной шапкой:
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
Html-разметка таблицы:
<table class="table-striped">
<tr class="table-head">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Цвет таблицы:
По умолчанию таблица сине-серого цвета, но можно вывести табилцу другого цвета, для этого в теге table используйте классы:
sk-orange - оранжевая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-purple - фиолетовая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-green - зеленая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-lightgreen - светло-зеленая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-lightblue - голубая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-purple - фиолетовая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-yellow - желтая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
sk-pink - желтая
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
|---|---|---|---|
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
| Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! | Унылая пора! Очей очарованье! |
Таблица со скроллом в десктопной и мобильной версии
Для широких таблицы в контенте, которые выходят за рамки блока можно использовать скролл:
| Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
| Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Унылая пора! Очей очарованье! Приятна мне твоя прощальная краса — Люблю я пышное природы увяданье, В багрец и в золото одетые леса, В их сенях ветра шум и свежее дыханье, И мглой волнистою покрыты небеса, И редкий солнца луч, и первые морозы, И отдаленные седой зимы угрозы. |
Для этого оберните таблицу в блок с классом outer-content-scroll:
<div class="outer-content-scroll">
<table width="1500px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Таблица со скроллом только в мобильной версии
Для вывода скролла в таблице только в мобильной версии используйте класс outer-content-m:
<div class="outer-content-m">
<table width="700px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
в атрибуте width замените 700px на нужную ширину таблицы.
В мобильной версии появится прокрутка внутри таблицы:
Адаптивная таблица:
Унылая пора! Очей очарованье!
Заголовок 1
Унылая пора! Очей очарованье!
Заголовок 2
Унылая пора! Очей очарованье!
Заголовок 3
Унылая пора! Очей очарованье!
Заголовок 4
Унылая пора! Очей очарованье!
Заголовок 5
Унылая пора! Очей очарованье!
Заголовок 1
Унылая пора! Очей очарованье!
Заголовок 2
Унылая пора! Очей очарованье!
Заголовок 3
Унылая пора! Очей очарованье!
Заголовок 4
Унылая пора! Очей очарованье!
Заголовок 5
Унылая пора! Очей очарованье!
html-разметка:
<div class="table-res">
<div class="table-res__head">
<div class="table-res__cell sk-w100">Унылая пора! Очей очарованье!</div>
</div>
<div class="table-res__row">
<div class="table-res__cell sk-w20">
<div class="table-res__hint">Заголовок 1</div>
Унылая пора! Очей очарованье!
</div>
<div class="table-res__cell sk-w20">
<div class="table-res__hint">Заголовок 2</div>
Унылая пора! Очей очарованье!
</div>
<div class="table-res__cell sk-w20">
<div class="table-res__hint">Заголовок 3</div>
Унылая пора! Очей очарованье!
</div>
</div>
<div class="table-res__row">
<div class="table-res__cell sk-w20">
<div class="table-res__hint">Заголовок 1</div>
Унылая пора! Очей очарованье!
</div>
<div class="table-res__cell sk-w20">
<div class="table-res__hint">Заголовок 2</div>
Унылая пора! Очей очарованье!
</div>
<div class="table-res__cell sk-w20">
<div class="table-res__hint">Заголовок 3</div>
Унылая пора! Очей очарованье!
</div>
</div>
</div>
Ширину ячеек можно менять, для этого, в блоке ячейки с классом table-res__cell используйте дополнительные классы:
sk-w10 - ширина 10%
sk-w20 - ширина 20%
sk-w30 - ширина 30%
sk-w40 - ширина 40%
sk-w50 - ширина 50%
sk-w60 - ширина 60%
sk-w70 - ширина 70%
sk-w80 - ширина 80%
sk-w90 - ширина 90%
sk-w100 - ширина 100%