html - 表格在变窄时无法正确显示 (WordPress)

Question

我对尝试在 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>

知道为什么会这样做吗？

Answer 1

如果不查看您的 CSS 很难确定，但是会为 785px 设置一个断点，该断点显示类为“固定”的元素，从而出现重复的表格条目。

尝试:

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