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

Posted 2023-03-06

【中文标题】响应式视图中表格中的重叠行

【英文标题】：overlapping rows in table in responsive view

【发布时间】：2017-06-15 13:12:27

【问题描述】：

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

附件上是这样的：

请帮忙。我的 CSS 不太好。

【问题讨论】：

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

【参考方案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;