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>

Answer 2

有两种流行的解决方法：

解决方案A （引导程序的经典“表响应性”）

只需将表格包装在可滚动的div中，并使其具有完整宽度。请注意，这在移动设备上变得混乱，尤其是当用户开始在两个方向上滚动时。更好的移动用户体验通常是使用模式打开表并允许用户全屏滚动表。

解决方案B （每种情况下的单独标记）

每种情况下都有单独的标记，使用@media查询隐藏不需要的内容。基本原则是复制内容并隐藏不想在每个响应间隔显示的克隆。

几乎所有解决方案都无法比其他解决方案更好。视情况而定。

以下是针对您特定情况的解决方案（基于注释中的说明）：

.mobile_content {
  display: none;
}
@media (max-width: 700px) {
  .desktop_content {
    display: none;
  }
  .mobile_content {
    display: block;
  }
  .hobbies_values + .hobbies_values {
    display: none;
  }
}

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

这实际上是解决方案B的另一种情况（在这里，不是完全替换表标记，而是重复使用其中的一部分，而只复制显示在其他列内容下的部分）。

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

2 个答案: