根据设备方向转置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

您可以使用网格系统创建一些表并通过断点显示它们。例如，使用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 2

您可以绝对定位所有内容并使用媒体查询来使用不同的CSS坐标集，但这是疯狂的，并且不再是“HTML表”。

Answer 3

学习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 4

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>