表格在狹窄時無法正確顯示（WordPress）

Question

我正在嘗試在WordPress中設置表格。 Have a look here - 頁面在普通桌面寬度（比如1000px）下看起來不錯，但是當您將其縮小到大約750像素以下時，表格開始重複信息，原因不明。我彈過我的CSS並通過我的表本身，似乎無法找到任何直接原因。這只是移動用戶嘗試查看該頁面時的問題。

其中一個表如下。

<table style="height: 25px;" border="1" width="673" cellspacing="0" cellpadding="0"> 
<tbody> 
<tr> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>WEEK</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>PRICE</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>AVAILABLE</strong></em></td> 
</tr> 
</tbody> 
</table> 
<table style="height: 120px;" border="1" width="673" cellspacing="0" cellpadding="0"> 
<tbody> 
<tr> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong> 3rd Jan to 10th Jan</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>Available </strong></em></td> 
</tr> 
<tr> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>10th Jan to 17th Jan</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td> 
</tr> 
<tr> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>17th Jan to 24th Jan</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td> 
</tr> 
<tr> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>24th Jan to 31st Jan</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><span style="color: #ff0000;"><em><strong> <span style="color: #000000;"><strong><em>Available </em></strong></span></strong></em></span></td> 
</tr> 
<tr> 
<td style="text-align: center;" valign="bottom" width="206"><b><i>31st Jan to 7th Feb</i></b></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td> 
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <span style="color: #ff0000;"><strong><em>BOOKED</em></strong></span></strong></em></td> 
</tr> 
</tbody> 
</table> 

任何想法，爲什麼這可能會這樣做？

Answer 1

很難確切地知道沒有看到你的CSS，但是會有一個爲785px設置的斷點，它顯示帶有「固定」類的元素，使得出現重複的表項。

嘗試：

@media all max-width: 785px { 
    .pinned { 
    display:none !important; 
    } 
}