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像素，我希望将年龄显示为数字（＆＃34;十八＆＃34; - ＆gt;＆＃34; 18＆＃34;）。

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

Answer 1

如果窗口的宽度小于1000像素，我想隐藏照片列。

使用CSS Media query检查屏幕尺寸，如果屏幕宽度小于1000像素，则将其隐藏。

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

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

如果宽度小于800px，我希望Age显示为数字（“十八” - >“18”）。

这也使用媒体查询，但它也需要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>

Answer 2

隐藏窗口宽度中的照片列＆lt; 1000像素只需应用以下媒体查询：

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

将年龄显示为窗口宽度的数字＆lt; 800像素你需要在HTML中的某个地方添加年龄，所以表格行可能看起来像那样

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

您可以使用@media查询来编写仅适用于特定大小屏幕的CSS。隐藏列很容易。你可以隐藏nth-child。 td:nth-child(3)匹配每个第三个单元格。

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

使用可以使用attr()来获取元素的属性。在下面的代码段中，我通过制作字体大小0来“隐藏”文字内容。然后，我在data-age伪元素中显示::before属性。

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

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

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

3 个答案: