html - 表格内容根据窗口大小而变化

Question

我有一个简单的表格

  <table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Photo</td>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>John Doe</td>
      <td>Eighteen</td>
      <td>Img</td>
    </tr>
    <tr>
      <td>Peter Stevens</td>
      <td>Twenty</td>
      <td>Img</td>
    </tr>
    <tr>
      <td>Elizabeth Olsen</td>
      <td>Twenty Six</td>
      <td>Img</td>
    </tr>
  </tbody>
</table>

如果窗口宽度小于 1000 像素，我想隐藏照片列。如果宽度小于 800 像素，我希望年龄显示为数字(“十八”->“18”)。

我该怎么做？ (最好只使用 HTML + CSS)

Answer 1

I'd like to hide the photos column if, say, width of the window is less than 1000px.

使用 CSS Media query检查屏幕大小，如果屏幕宽度小于 1000px，则隐藏它。

<td class="photo">Img</td>

@media (max-width:1000px) {
    .photo {
        display: none
    }
}

---

And I'd like the Age to show as a number ("Eighteen" -> "18") if the width is less than 800px.

这也使用媒体查询，但它需要 CSS Pseudo Element和一个 HTML Custom Data Attribute

<td class="age" data-age="18">Eighteen</td>

@media(max-width:800px) {
    .age {
        font-size: 0;
    }
    .age:before {
        content: attr(data-age);
        font-size: 12pt;          /* Set this to your desired font size */
    }
}

---

_{完整演示:}

@media(max-width:1000px) {
    .photo {
        display: none
    }
}
@media(max-width:800px) {
    .age {
        font-size: 0;
    }
    .age:before {
        content: attr(data-age);
        font-size: 12pt;         /* Set this to your desired font size */
    }
}

<table>
  <thead>
    <tr>
      <td>Name</td>
      <td class="age" data-age="?">Age</td>
      <td class="photo">Photo</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td class="age" data-age="18">Eighteen</td>
      <td class="photo">Img</td>
    </tr>
    <tr>
      <td>Peter Stevens</td>
      <td class="age" data-age="20">Twenty</td>
      <td class="photo">Img</td>
    </tr>
    <tr>
      <td>Elizabeth Olsen</td>
      <td class="age" data-age="26">Twenty Six</td>
      <td class="photo">Img</td>
    </tr>
  </tbody>
</table>