Я хотел бы использовать JQueryMobile, отвечающую таблице reflow без ТЕА, или с THEAD, не занимая места. Вариант использования заключается в том, что у меня есть какой-то маркетинговый материал, который я хотел бы быть в двух столбцах на широких экранах и один столбец на маленьком экране.
Все работает отлично, за исключением того, что кажется, что JQM требует THEAD. В качестве обходного пути я помещал пустые заголовки (nbsp) в THEAD, но я хотел бы получить это потраченное впустую пространство.
Вот jsfiddle, демонстрирующий проблему: http://jsfiddle.net/reL97/5/
Если вы удалите THEAD, он сломается. Однако я не могу найти способ уменьшить пространство THEAD. Например:
#movie-table thead {
display: none;
}
Примечание: причина, по которой я не просто вставлять фактические заголовки, заключается в том, что при переплаве заголовки занимают ценное горизонтальное пространство. Я бы хотел, чтобы эти заголовки удалялись как по вертикали, так и по горизонтали.
Есть идеи? Спасибо.
Вот ваш обновленный FIDDLE
thead теперь пуст:
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
И CSS удаляет поля/отступы из ячеек заголовка и, при необходимости, меняет интервал, когда экран сужается в режиме плавления:
#movie-table thead tr th{
margin: 0;
padding: 0;
}
@media (max-width: 35em) {
#movie-table th{
margin-top: 12px; /* optional spacing during reflow */
}
}