html - 如何在 CSS 中更改表格？

Question

由于媒体查询，我想更改表格的顺序。

在我的 HTML 中，我的代码如下所示：

<table>
    <tr>
     <td>date1</td>
    <td>place1</td>
    <td>ticket1</td>
  </tr>
  <tr>
    <td>date2</td>
    <td>place2</td>
    <td>ticket2</td>
  </tr>
 </table>

看起来像这样：

现在因为我想将其更改为不同的屏幕尺寸。它必须看起来像这样。

我如何在 CSS 中做到这一点？

标签： htmlcsshtml-tablemedia-queries

Answer 1

这是使用少量 css 和 flexbox 的最简单的解决方案

tr {

    font-size: 5em;
}

@media only screen and (max-width: 900px) {
    tr {
        display: flex;
        flex-direction: column;
    }
}

    <table>
        <tr>
         <td>date1</td>
        <td>place1</td>
        <td>ticket1</td>
      </tr>
      <tr>
        <td>date2</td>
        <td>place2</td>
        <td>ticket2</td>
      </tr>
     </table>

移动视图：

电脑视图