我对要在WordPress中设置的表感到不满。 Have a look here-在具有正常桌面宽度(例如1000像素)的情况下,该页面看起来不错,但是当将其缩小到大约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>
有任何想法为什么要这样做吗?
最佳答案
很难确定是否没有看到CSS,但是会为785px设置一个断点,该断点将显示具有“固定”类的元素,从而使重复的表项出现。
尝试:
@media all max-width: 785px {
.pinned {
display:none !important;
}
}