Попытка преобразовать сгенерированную таблицу HTML в div или ul с помощью jQuery, чтобы сделать ее отзывчивой

Question

У нас есть система, которая генерирует список продуктов. Все эти результаты помещаются в аппетитную (!) Таблицу с другим вложенным внутри нее, чтобы обернуть вокруг изображения продукта. Каждый элемент имеет изображение и название только продукта, оба связаны со страницей продукта.

Я не могу редактировать этот сгенерированный HTML, но я могу редактировать нижний колонтитул / заголовок и т. Д., Чтобы добавить Jquery, и могу редактировать CSS, как я работал над большинством своих проблем.

Единственная важная часть, которую я могу изменить в CMS, - это количество отображаемых столбцов продуктов. На маленьком телефоне я хочу, чтобы это было 1, планшет может быть 3, до 6 для настольных компьютеров. это просто ширина tr в таблице. Если я установлю это на 1, я подумала, что могу обернуть одиночные td шириной td, поместив их рядом друг с другом, что я могу, да.

Моя проблема возникает, когда продукт имеет длинный заголовок. Если у 4-го из 5-ти товаров в ряду есть более длинный заголовок, первый товар в следующем ряду будет на 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>

Ничто из этого не является действительно редактируемым, но как я могу изменить его так, как мне бы хотелось? Двойной br на втором a есть, потому что обычно между ними будет отображаться краткое описание, но я скрыл это в CMS, так как он портил структуру более длинных описаний.

Lil 'обновление (я пойду с сайта в какой-то момент..)

http://jsfiddle.net/fjnN6/ Это объясняет проблему, когда у меня есть более длинный заголовок в одном из них, следующий ряд начинается справа от него. ТИА:)

Answer 1

Хорошо, если я правильно понял простой CSS для td элементы сэкономят вам время:

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

Это скрыло бы весь контент, который превышает значение свойства width. Пожалуйста, предоставьте несколько скриншотов, если это нежелательное поведение.