Собственно нужно перевернуть таблицу, чтобы заголовки, которые изначально слева, оказались, вдруг, сверху при изменении разрешении экрана:
@media (max-width: 500px) { .tablica { transform: rotate(90deg); } .ячейки { transform: rotate(-90deg); }}
jsfiddle.net/L24rb8sh/
Но, так, она при повороте корявая получается. Надо на полномасштабном размере экрана что то с шири'нами колдовать.
table{ border:1px solid #333; border-collapse: collapse; display:inline-block; } tr{ display:block; width:25%; float:left; } th{ background:#ddd; color:#333; border:1px solid #333; padding:10px; box-sizing:border-box; display:block; width:100%; } td{ border:1px solid #333; padding:10px; box-sizing:border-box; display:block; width:100%; white-space:nowrap; }