在響應視圖中的表中重疊行

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 positionings不相互重疊，如果它們具有相同的利潤率。

如果刪除該屬性或position: relative的<tr>取代它 - 標籤再也不會重疊，但你必須找到一種方式來顯示你的<tr> - 包含價格標籤和這樣的標籤。

Answer 2

以下是我建議用於快速轉身的修復。加入這個CSS在你的媒體查詢

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