Table 内容根据 window 大小而变化

Question

我有一个简单的table

  <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>

如果 window 的宽度小于 1000 像素，我想隐藏照片列。如果宽度小于 800 像素，我希望年龄显示为数字（"Eighteen" -> “18”）。

我该怎么做？（最好仅使用 HTML + CSS）

Answer 1

隐藏 window 宽度 < 1000 像素的照片列 只需像这样应用媒体查询：

           @media(max-width : 1000px) {
                td:nth-child(3) {
                    display:none;
                }
            }

将年龄显示为 window 宽度 < 800px 中的数字您需要在 HTML 的某处添加年龄数字，因此 table 行可能看起来像

                <tr>
                    <td>John Doe</td>
                    <td>
                        <span class="age-in-text">Eighteen</span>
                        <span class="age-in-numbers">18</span>
                    </td>
                    <td>Img</td>
                </tr>

然后您可以像这样简单地设置您的样式/媒体查询：

            .age-in-numbers {
                    display:none;
                }
            .age-in-text {
                    display:block;
                }
            @media(max-width : 800px) {
                .age-in-numbers {
                    display:block;
                }
                .age-in-text {
                    display:none;
                }
            }

Answer 2

您可以使用 @media 查询编写仅适用于特定尺寸屏幕的 CSS。隐藏列非常容易。您可以只隐藏 nth-child。 td:nth-child(3) 匹配每三个单元格。

隐藏文本有点难。 CSS 无法将书面文本转换成这样的数字，但在您的服务器端脚本 (PHP?) 中您可能已经可以添加这些数字了。现在，您可以添加一个带有数字年龄的额外列，并在显示另一个时隐藏一个，但我个人认为将年龄添加为属性并使用 CSS 显示数字年龄是一个巧妙的技巧而不是文本内容。

使用可以使用attr()获取元素的属性。在下面的代码片段中，我通过使字体大小 0 来 'hide' 文本。然后，我在 ::before 伪元素中显示 data-age 属性。

此方法的优点是不需要对 HTML 进行重大更改。从语义上讲，它仍然只是一个简单的 table.

@media (max-width: 800px) {
  /* Hide the third column */
  td:nth-child(3) {
    display: none;
  }
  /* Hide the text in the second column by setting the font-size to 0 */
  td:nth-child(2) {
    font-size: 0;
  }
  /* Show the numeric value from the attribute instead. */
  td:nth-child(2)::before {
    font-size: 17px;
    content: attr(data-age);
  }
}

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

Answer 3

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 and an 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>

Table 内容根据 window 大小而变化

Table contents change depending on window size

html

css

resize