在响应视图中重叠表中的行

Question

我在this link上修理桌子时遇到了麻烦。它有两行，但当我将其转换为移动/平板电脑视图时，第二行重叠在第一行上。

在附件上看起来像这样：

请帮忙。我在CSS方面不是很好。

Answer 1

这是因为以下几行：

@media screen and (max-width: 994px)
table.colors_pricebox tbody tr:last-child td:nth-child(2) table:first-child tbody tr:first-child
{ 
    position: absolute !important;
}

Absolute定位如果具有相同的边距，则彼此重叠。

如果删除该属性或将其替换为position: relative <tr> - 标签不再重叠，但您必须找到显示<tr> - 标签的方法包含价格标签等。

Answer 2

以下是我建议您暂时快速转身的修复方法。在媒体查询中添加此css

＆＃13;

＆＃13;

@media screen and (max-width: 994px) {
  td.productDetailDiscountWrapper table tr td {
    padding-top: 50px !important;
  }
  .product_productprice {
    margin-top: 40px !important;
  }
}

＆＃13;

＆＃13;

＆＃13;