Как изменить таблицу в 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?

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>

мобильный просмотр:

P C VIEW

Answer 2

tr td{
  display:block;
}

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

Answer 3

Просто обновите отображение элементов таблицы:

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 4

Вы не должны запрашивать отображение на одном экране, вы всегда должны использовать mediaquery, если вы используете его для адаптивного экрана, ниже фрагмент помогает создать другое представление на основе отзывчивости экрана.

здесь скрипка с использованием 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>