如何更改 CSS 中的 table？

Question

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

在我的 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 中执行此操作？

Answer 1

只需更新 table 个元素的显示：

tbody,tr,td {  /* you can also include "table" if you want full width table */
  display:block;
}
td {
  border:1px solid;
  padding:10px;
}

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

Answer 2

这是使用少量 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>

移动视图：

电脑浏览

Answer 3

tr td{
  display:block;
}

<table>
    <tr >
     <td>date1</td>
    <td>place1</td>
    <td>ticket1</td>
  </tr>

Answer 4

您不应要求显示为单一视图，如果您将其用于响应式屏幕，则应始终使用 mediaquery，下面的代码段有助于根据屏幕响应创建不同的视图。

这里是 fiddle 使用 mediaquery。

table,
tr,
td {
  display: block;
}

@media screen and (max-width:300px) {
  /* any other screen size */
  table tr>* {
    display: inline;
  }
}

<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 中的 table？

How to change a table in CSS?

html

css

html-table

media-queries