尝试使用jQuery将生成的HTML表转换为div或ul，以使其具有响应性

我们有一个生成产品列表的系统。它将这些结果全部放在一个美味的（！）表中，另一个嵌套在其中，以环绕产品图像。每个项目只有一个图像和产品的标题，两者都链接到产品页面

我不能编辑任何生成的HTML，但我可以编辑页脚/页眉等来添加Jquery，还可以编辑CSS，这就是我解决大多数问题的方法

我可以在CMS中更改的唯一相关部分是显示了多少列产品。在一部小型手机上，我希望它是1台，平板电脑可能是3台，台式机最多6台。这只是表中tr的宽度。如果我将其设置为1，我想我可以通过将单个td-wide TR彼此浮动来包装它们，我可以，是的

当一个产品的标题很长时，我的问题就出现了。如果一行中5个产品中的第4个产品的标题较长，则下一行中的第一个产品将位于第5位，与前4位空白的订单不符

我想，一些HTML可能会有所帮助

<table id="catprods_tbl" width="100%">
<tbody>
<tr>
<td class="column_main" align="center" valign="top">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="column_main">
<a class="links_main" href="/linktoproduct"><img src="/images/thumb.jpg" border="0"></a>
</td>
</tr>
</tbody>
</table>
<a class="links_main" href="/linktoproduct">ProductTitle</a><br>£320.00<br><br>
</td>
</tr>
</tbody>
</table>

320.00英镑

所有这些都不是可编辑的，但我如何才能使其变形以符合我的要求？第二个a上的双br是存在的，因为通常它们之间会显示一个简短的描述，但我将其隐藏在CMS中，因为它会在较长的描述上弄乱布局

Lil’更新（我将在某个时候了解站点）

---

这就解释了这个问题，当我在其中一个标题中有一个较长的标题时，下一行就从它的右边开始。TIA:）

好的，如果我正确地为

td

元素提供简单的CSS将为您节省时间：

table td {
    width: 50px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

这将隐藏所有超过宽度属性值的内容。

---

请提供一些屏幕截图，如果这是不可取的行为。

在我看来，这更像是一个CSS问题。您可能想先看看一些网格系统，比如960gs，是如何处理这样的表的。谢谢Jay Blanchard和Johnny_D-是的，CSS，>。<我应该包括这些，抱歉。这里是我的意思，第三个有一个较长的标题