表格在狭窄时无法正确显示（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; 
    } 
}