响应式设计：移动端/平板端表格转为块级元素、列转成行实现咨询

问题修正方案 #

你现有代码存在3处问题导致效果未实现，修正后即可达成预期的移动端表格转卡片行的效果：

• 拼写错误：你代码中的tax-align是无效属性，正确属性为text-align
• 移动端下第3~6列的td未指定宽度，导致布局错乱
• 属性前的标签伪元素设置了100%宽度+浮动，会把属性值挤到下一行，不符合标签与值并排的需求

修正后的移动端CSS代码（替换你原有@media only screen and (max-width: 768px)内的全部内容即可） #

@media only screen and (max-width: 768px) {
  .product-overview-table .p_tag {
    position: absolute;
    left: -20px;
    top: -10px;
  }
  .product-overview-table tbody tr {
    padding: 10px;
  }
  .product-overview-table tr td:first-child {
    width: 100%;
  }
  .product-overview-table tr td:nth-child(2) {
    width: 100%;
  }
  .product-overview-table tr td:last-child,
  .product-overview-table tr th:last-child {
    width: 100%;
  }
  .product-overview-table .product-btn a {
    margin-top: 20px;
  }
  .product-overview-table tr th:nth-child(2) {
    width: 100%;
  }
  .product-overview-table tr th:first-child,
  .product-overview-table tr th:nth-child(2),
  .product-overview-table tr th:nth-child(3),
  .product-overview-table tr th:nth-child(4),
  .product-overview-table tr th:nth-child(5),
  .product-overview-table tr th:nth-child(6),
  .product-overview-table tr th:last-child {
    display: none;
  }
  /* 修正后属性标签样式 */
  td:not(:first-child):not(:nth-child(2)):not(:last-child):before {
    color: #91ced4;
    margin-right: 8px;
    font-weight: 500;
  }
  /* 修正后属性单元格样式，宽度100%独占一行，文本左对齐 */
  .product-overview-table td:nth-child(3),
  .product-overview-table td:nth-child(4),
  .product-overview-table td:nth-child(5),
  .product-overview-table td:nth-child(6) {
    width: 100%;
    text-align: left;
    padding: 6px 10px;
  }
  /* 给属性字段自动加对应标签名 */
  td:nth-child(3):before {
    content: "材质:";
  }
  td:nth-child(4):before {
    content: "轮子:";
  }
  td:nth-child(5):before {
    content: "承重:";
  }
  td:nth-child(6):before {
    content: "颜色数:";
  }
}

替换完成后，768px宽度以下的设备访问时，表格会自动转为卡片样式：产品预览图、产品名称、购买按钮各占整行，材质、轮子、承重、颜色四个属性每行展示一组，对应标签自动显示在属性值左侧，符合你要的UX优化需求。

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