Задача. Необходима простая заготовка таблицы, которая прокручивалась бы на мобильных устройствах если не помещается в экран.
Решеине. Предлагаю такую html-таблицу, обернутую в div с классом mobile-scroll-x, который будет реализовывать скроллинг таблицы на мобильных.
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Строка 1 | 1 | 1 |
| Строка 2 | 2 | 2 |
| Строка 3 | 3 | 3 |
|
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div class="mobile-scroll-x"> <table class="table-2td"> <tbody> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td>Строка 1</td> <td>1</td> <td>1</td> </tr> <tr> <td>Строка 2</td> <td>2</td> <td>2</td> </tr> <tr> <td>Строка 3</td> <td>3</td> <td>3</td> </tr> </tbody> </table> </div> <style> /* Стили к таблице */ .table-2td { border: 1px solid #f1f1f1; } .table-2td th { background-color: #313131 !important; color: #fff; } .table-2td tr:nth-child(odd) td { background: #f1f1f1; border-left: 1px solid #fbfbfb; } .table-2td tr:nth-child(even) td { border-left: 1px solid #f1f1f1; } .table-2td td { vertical-align: middle; } @media (max-width: 728px){ .mobile-scroll-x { overflow-x: scroll; } } </style> |