css 根据设备方向转置HTML表

gzjq41n4 于 2023-04-08 发布在其他

关注(0)|答案(6)|浏览(122)

假设我有一张这样的table：

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的情况下实现这一点？

css

来源：https://stackoverflow.com/questions/53785811/transpose-html-table-depending-on-device-orientation

6条答案

按热度按时间

qaxu7uf21#

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

赞(0）回复(0）举报 2023-04-08

hyrbngr72#

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

赞(0）回复(0）举报 2023-04-08

qpgpyjmq3#

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>

赞(0）回复(0）举报 2023-04-08

8ljdwjyq4#

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

赞(0）回复(0）举报 2023-04-08

cnh2zyt35#

使用flexbox：

table{ 
  width:100%; 
}
tbody{
  display:flex;
  flex-direction: row;
  width: 100%;
}
tr{
  flex: 1;
  display: block;
}
td, th{
  display:block;
}

@media only screen and (max-width: 600px) {
  tbody{
    flex-direction: column;
  } 
  tr{
    display:flex;
    flex-direction: row;
  }
  td, th{
    flex: 1;
  }
}

/* DEMO styling */
td, th{
  border: 1px solid black;
  padding:10px;
  height: 30px;
}
tr:nth-child(2n){
  background: #eee;
}
tr:nth-child(2n + 1){
  background: #fafafa;
}

<table>
   <tbody>
      <tr>
        <th>City</th>
        <th>Country</th>
        <th>Annual Sun Hrs</th>
      </tr>
     <tr>
        <td>NYC</td>
        <td>USA</td>
        <td>2534</td>
     </tr>
     <tr>
        <td>Toronto</td>
        <td>Canada</td>
        <td>2066</td>
     </tr>
     <tr>
       <td>LA</td>
       <td>USA</td>
       <td>3254</td>
     </tr>
     <tr>
        <td>Bogotá</td>
        <td>Colombia</td>
        <td>1328</td>
     </tr>
     <tr>
        <td>São Paulo</td>
        <td>Brazil</td>
        <td>1893</td>
     </tr>
     <tr>
        <td>Santiago</td>
        <td>Chile</td>
        <td>2807</td>
     </tr>
     <tr>
        <td>Sydney</td>
        <td>Australia</td>
        <td>2468</td>
     </tr>
     <tr>
        <td>Berlin</td>
        <td>Germany</td>
        <td>1626</td>
     </tr>
     <tr>
        <td>London</td>
        <td>UK</td>
        <td>1633</td>
     </tr>
     <tr>
        <td>Madrid</td>
        <td>Spain</td>
        <td>2769</td>
     </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-04-08

yeotifhr6#

这不是一个现实的答案（但也许是...？）。
看看表格的ASCI艺术，在我看来，如果能够像这样转换表格及其单独的标题和数据单元格：

table.rotated-table,
table.rotated-table th,
table.rotated-table td
{
    transform: rotateY(180deg) rotateZ(90deg);
}

你会得到你想要的相对方向的单元格。唯一的（主要的）问题是浏览器基于它们未旋转的大小和形状来定位旋转的元素，所以这需要解决。如果你有完美的方形表格单元格，这可以工作。

赞(0）回复(0）举报 2023-04-08

我来回答

css 根据设备方向转置HTML表

6条答案

相关问题

热门标签

最新问答