Как повернуть таблицу 2.X

 
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 450
Много перекопал и ничего подобного не обнаружил, даже близко. Даже начал думать, что так не бывает...
Собственно нужно перевернуть таблицу, чтобы заголовки, которые изначально слева, оказались, вдруг, сверху при изменении разрешении экрана:
Как повернуть таблицу
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 353
https://jsfiddle.net/L6tqfxy8/2/
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 353
Еще можно попробовать трансформации

Код PHP:
  1.  
  2. @media (max-width: 500px) {
  3. .tablica {
  4. transform: rotate(90deg);
  5. }
  6. .ячейки {
  7. transform: rotate(-90deg);
  8. }}
  9.  
Т.е. таблицу поворачиваем на 90 градусов по часовой, а ячейки таблицы против часовой.
https://jsfiddle.net/L24rb8sh/
Но, так, она при повороте корявая получается. Надо на полномасштабном размере экрана что то с шири'нами колдовать.
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1936
Код CSS:
  1. table{
  2. border:1px solid #333;
  3. border-collapse: collapse;
  4. display:inline-block;
  5. }
  6. tr{
  7. display:block;
  8. width:25%;
  9. float:left;
  10. }
  11. th{
  12. background:#ddd;
  13. color:#333;
  14. border:1px solid #333;
  15. padding:10px;
  16. box-sizing:border-box;
  17. display:block;
  18. width:100%;
  19. }
  20. td{
  21. border:1px solid #333;
  22. padding:10px;
  23. box-sizing:border-box;
  24. display:block;
  25. width:100%;
  26. white-space:nowrap;
  27. }
Как повернуть таблицу

Как повернуть таблицу
Редактировалось: 1 раз (Последний: 29 июня 2019 в 23:54)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 450
Dmitry, чебурек дохлэй мыш, вот спасибо!
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.