Пример:
Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 | Заголовок 5 |
---|---|---|---|---|
Контент 1 | Контент 1 | Контент 1 | Контент 1 | Контент 1 |
Контент 2 | Контент 2 | Контент 2 | Контент 2 | Контент 2 |
Контент 3 | Контент 3 | Контент 3 | Контент 3 | Контент 3 |
Контент 4 | Контент 4 | Контент 4 | Контент 4 | Контент 4 |
Контент 5 | Контент 5 | Контент 5 | Контент 5 | Контент 5 |
Контент 6 | Контент 6 | Контент 6 | Контент 6 | Контент 6 |
Контент 7 | Контент 7 | Контент 7 | Контент 7 | Контент 7 |
Для просмотра варианта таблицы на узких экранах, сузьте окно браузера
HTML:
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 |
<table class="resp-tab"> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> <th>Заголовок 4</th> <th>Заголовок 5</th> </tr> </thead> <tbody> <tr> <td>Контент 1</td> <td>Контент 1</td> <td>Контент 1</td> <td>Контент 1</td> <td>Контент 1</td> </tr> <!-- Строки таблицы --> <tr> <td>Контент 7</td> <td>Контент 7</td> <td>Контент 7</td> <td>Контент 7</td> <td>Контент 7</td> </tr> </tbody> </table> |
CSS:
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.resp-tab { border-radius: 5px; font-weight: normal; border: none; border-collapse: collapse; width: 100%; max-width: 100%; white-space: nowrap; background-color: white; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2 ); } .resp-tab td, .resp-tab th { text-align: center; padding: 8px; font-size: 15px; border: none; font-family: Verdana, sans-serif; } .resp-tab td { font-size: 13px; border-right: 1px solid #E6E4E4; } .resp-tab th { color: #ffffff; background: #2d6b9f; } .resp-tab th:nth-child(odd) { background: #337AB7; } .resp-tab tr:nth-child(even) { background: #F8F8F8; } @media (max-width: 767px) { .resp-tab { display: block; width: 100%; } .resp-tab thead, .resp-tab tbody, .resp-tab thead th { display: block; } .resp-tab thead { float: left; } .resp-tab tbody { width: auto; position: relative; overflow-x: auto; } .resp-tab td, .resp-tab th { padding: 10px 2px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; width: 160px; font-size: 13px; text-overflow: ellipsis; } .resp-tab thead th { text-align: center; } .resp-tab tbody tr { display: table-cell; } .resp-tab tbody tr:nth-child(odd) { background: none; } .resp-tab tr:nth-child(even) { background: transparent; } .resp-tab tr td:nth-child(odd) { background: #F8F8F8; border-right: 1px solid #E6E4E4; } .resp-tab tr td:nth-child(even) { border-right: 1px solid #E6E4E4; } .resp-tab td { display: block; text-align: center; } } |
Найдено на codepen.io у пользователя Flor Antara
Добавить комментарий: