css - 在 CSS 中更改表格列标题和表格单元格元素位置@media

Question

我需要使用 CSS 制作响应式表格。当屏幕尺寸较小时，我必须让表格标题和表格单元格数据并排显示。我怎样才能只使用 CSS 来做到这一点？

<table class="hobbies_table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th class="hobbies">Hobby1</th>
    <th class="hobbies">Hobby2</th>
    <th>Contact</th>
  </tr>
  <tr>
    <td>John</td>
    <td>21</td>
    <td class="hobbies_values">Football</td>
    <td class="hobbies_values">Snooker</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Jack</td>
    <td>30</td>
    <td class="hobbies_values">Reading</td>
    <td class="hobbies_values">Swimming</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>Jenna</td>
    <td>40</td>
    <td class="hobbies_values">Travelling</td>
    <td class="hobbies_values">Singing</td>
    <td>1234567890</td>
  </tr>
</table>

.hobbies {
  width: 50%;
  display: flex;
}
.hobbies_values {
  width: 50%;
  display: flex;
}

#hobbies_table td:nth-of-type(3):before { content: attr(hobbies) }
#hobbies_table td:nth-last-of-type(2):before { content: attr(hobbies) }

我只会基本的 CSS。所以这就是我尝试过的。但是我开始知道这是错误的方法。那么我该如何更正代码呢？在 @media 中，我希望像这样显示 hobbies 和 hobbies_values:

Hobby1: Football
Hobby2: Snooker

Hobby1: Reading
Hobby2: Swimming

Hobby1: Travelling
Hobby2: Singing

Answer 1

可能有帮助:)

 
      .hobbies_table {
          width: 100%;
      }
      th {
          display: flex;
      }
      
       tr {
          width: 20%;
          display: inline-grid;
      }
 

<table class="hobbies_table">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th class="hobbies">Hobby1</th>
      <th class="hobbies">Hobby2</th>
      <th>Contact</th>
    </tr>
    <tr>
      <td>John</td>
      <td>21</td>
      <td class="hobbies_values">Football</td>
      <td class="hobbies_values">Snooker</td>
      <td>1234567890</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>30</td>
      <td class="hobbies_values">Reading</td>
      <td class="hobbies_values">Swimming</td>
      <td>1234567890</td>
    </tr>
    <tr>
      <td>Jenna</td>
      <td>40</td>
      <td class="hobbies_values">Travelling</td>
      <td class="hobbies_values">Singing</td>
      <td>1234567890</td>
    </tr>
  </table>