Транспонировать таблицу HTML в зависимости от ориентации устройства

Question

Скажем, у меня есть такая таблица:

x A B C D E F
1 a b c d e f
2 g h i j k l

Теперь, когда устройство находится в портретной ориентации (или просто ширина окна слишком мала), я хочу отобразить эту таблицу следующим образом:

x 1 2 
A a g
B b h
C c i 
D d j
E e k
F f l

Возможно ли достичь этого без использования JavaScript?

Answer 1

CSS допускает это, но никто из Edge, FF или Chrome не делает этого правильно.Chrome игнорирует режим записи ячеек, FF не дает клеткам достаточной высоты, а Edge делает вращающуюся таблицу очень высокой.

http://jsfiddle.net/dgrogan/z0fhj7gq/3/

let state = 0;
change.onclick = function() {
  outer.style.writingMode = (state ? "horizontal-tb" : "vertical-lr");
  state = !state;
}

td,
th {
  writing-mode: horizontal-tb;
}

<button id=change>rotate
</button>

<div id=outer style="writing-mode:horizontal-tb; border:1px solid red;">
  <table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>

</div>

Answer 2

учить grid.это очень просто.

div {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width:300px;
}

@media screen and (max-width:600px){
  div {
    grid-template-columns: 1fr 1fr 1fr;
    width:100px;
}
}

<div>
  <span>X</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
  <span>F</span>
  <span>1</span>
  <span>a</span>
  <span>b</span>
  <span>c</span>
  <span>d</span>
  <span>e</span>
  <span>f</span>
  <span>2</span>
  <span>g</span>
  <span>i</span>
  <span>j</span>
  <span>k</span>
  <span>l</span>
  <span>h</span>
</div>

Answer 3

Вы можете использовать систему сетки для создания некоторых таблиц и отображения их по точкам останова.Например, используя Boostrap 4:

.row > .col, .row > [class^="col-"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-none d-sm-block">
  <div class="row">
    <div class="col">x</div>
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
    <div class="col">F</div>
  </div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">a</div>
    <div class="col">b</div>
    <div class="col">c</div>
    <div class="col">d</div>
    <div class="col">e</div>
    <div class="col">f</div>
  </div>
  <div class="row">
    <div class="col">2</div>
    <div class="col">g</div>
    <div class="col">h</div>
    <div class="col">i</div>
    <div class="col">j</div>
    <div class="col">q</div>
    <div class="col">l</div>
  </div>
</div>

<div class="d-sm-none">
  <div class="row">
    <div class="col">x</div>
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
  <div class="row">
    <div class="col">A</div>
    <div class="col">a</div>
    <div class="col">g</div>
  </div>
  <div class="row">
    <div class="col">B</div>
    <div class="col">b</div>
    <div class="col">h</div>
  </div>
  <div class="row">
    <div class="col">C</div>
    <div class="col">c</div>
    <div class="col">i</div>
  </div>
  <div class="row">
    <div class="col">D</div>
    <div class="col">d</div>
    <div class="col">j</div>
  </div>
  <div class="row">
    <div class="col">E</div>
    <div class="col">e</div>
    <div class="col">k</div>
  </div>
  <div class="row">
    <div class="col">F</div>
    <div class="col">f</div>
    <div class="col">l</div>
  </div>
</div>

Answer 4

Вы можете позиционировать абсолютно все и использовать медиазапрос, чтобы использовать другой набор координат CSS, но это безумие и больше не является "таблицей HTML".