如何在响应式表格中用data-label显示图片而非文本？

我明白你现在的需求——在屏幕宽度≤600px的时候，把原本通过td:before显示的文本表头换成对应店铺的图片，而且要基于data-label属性来实现对吧？这里有两种可行的方案，你可以根据自己的需求选择：

方案1：直接用data-label存储图片URL（简洁但兼容性稍弱） #

这种方法直接把图片地址写在data-label里，通过CSS伪元素的背景图来渲染：

第一步：修改HTML的data-label属性 #

把原来的文本值换成对应店铺的图片URL：

<tbody>
  <tr>
    <td data-label="https://www.pawtrails.ie/wp-content/uploads/2018/01/pet-essentials-logo.jpg">
      <!-- 原有内容不变 -->
    </td>
    <td data-label="这里替换成Macroom Pet Shop的图片URL">
      <!-- 原有内容不变 -->
    </td>
    <td data-label="https://www.pawtrails.ie/wp-content/uploads/2018/01/potty-fish.jpg">
      <!-- 原有内容不变 -->
    </td>
    <td data-label="这里替换成Slinkys Pet Shop的图片URL">
      <!-- 原有内容不变 -->
    </td>
  </tr>
</tbody>

第二步：修改CSS的@media部分 #

把原来生成文本的td:before改成用背景图展示：

@media screen and (max-width: 600px) {
  /* ... 保留原有其他样式 ... */
  table td:before {
    content: ""; /* 清空默认文本 */
    float: left;
    background-image: url(attr(data-label)); /* 读取data-label里的图片URL */
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px; /* 调整图片宽度，适配小屏 */
    height: 60px;
    margin-right: 10px; /* 给文本留出间距 */
    vertical-align: middle; /* 让图片和文本垂直对齐 */
  }
}

注意：部分旧浏览器对url(attr(data-label))的支持有限，如果你的用户群体包含旧版浏览器，更推荐下面的方案。

方案2：用data-label做标识，CSS属性选择器匹配图片（兼容性更好） #

这种方法把data-label作为店铺的唯一标识，通过CSS属性选择器给每个伪元素指定对应图片，兼容性更强：

第一步：修改HTML的data-label属性 #

把文本换成简洁的店铺标识：

<tbody>
  <tr>
    <td data-label="pet-essentials">
      <!-- 原有内容不变 -->
    </td>
    <td data-label="macroom-pet-shop">
      <!-- 原有内容不变 -->
    </td>
    <td data-label="potty-fish">
      <!-- 原有内容不变 -->
    </td>
    <td data-label="slinkys-pet-shop">
      <!-- 原有内容不变 -->
    </td>
  </tr>
</tbody>

第二步：修改CSS的@media部分 #

给每个标识对应的伪元素设置背景图：

@media screen and (max-width: 600px) {
  /* ... 保留原有其他样式 ... */
  table td:before {
    content: "";
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    vertical-align: middle;
  }
  /* 给每个店铺标识匹配对应的图片 */
  table td[data-label="pet-essentials"]:before {
    background-image: url("https://www.pawtrails.ie/wp-content/uploads/2018/01/pet-essentials-logo.jpg");
  }
  table td[data-label="macroom-pet-shop"]:before {
    background-image: url("这里替换成Macroom Pet Shop的图片URL");
  }
  table td[data-label="potty-fish"]:before {
    background-image: url("https://www.pawtrails.ie/wp-content/uploads/2018/01/potty-fish.jpg");
  }
  table td[data-label="slinkys-pet-shop"]:before {
    background-image: url("这里替换成Slinkys Pet Shop的图片URL");
  }
}

额外优化建议 #

• 如果图片和文本排版有点挤，可以给table td增加一点左内边距：padding-left: 80px;（比伪元素宽度大一点）
• 要是需要图片和文本垂直居中，可以给table td设置display: flex; align-items: center;，同时调整伪元素的float为none

内容的提问来源于stack exchange，提问作者AZI