响应式视图中表格中的重叠行答案

【问题标题】：overlapping rows in table in responsive view响应式视图中表格中的重叠行
【发布时间】：2017-06-15 13:12:27
【问题描述】：

我在修复 this link 上的表格时遇到了问题。它有两行，但是当我将其转到移动/平板电脑视图时，第二行与第一行重叠。

附件上是这样的：

请帮忙。我的 CSS 不太好。

【问题讨论】：

您能否提供您的代码示例，到目前为止您尝试了什么？

标签： css html-table media-queries responsive

【解决方案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> - 标签包含价格标签等。

【讨论】：

【解决方案2】：

这是我建议的快速解决方案。在您的媒体查询中添加此 CSS

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

【讨论】：