JQuery выравнивание таблицы (число строк/ячеек) на основе разрешения экрана

Question

У меня есть таблицу, как это (8 ячеек только для целей иллюстрации, могут быть более или менее):

[1] [2] [3] [4] 
[5] [6] [7] [8] 

Каждый элемент в каждой ячейке имеет ширину примерно 450 пикселей, поэтому они удобно расположены рядом друг с другом на экране 1920x1200 (что, кстати, принадлежит мне). Тем не менее, мне нужно, чтобы эта конфигурация автоматически менялась и выровняла наилучший способ, если кто-нибудь с меньшим (или более широким) разрешением экрана появится или изменит размер окна браузера.

Так, 1024x768, было бы:

[1] [2] 
[3] [4] 
(etc) 

и 2560x1600 было бы:

[1] [2] [3] [4] [5] 
[6] [7] [8] [9] [10] 
(etc) 

Как я могу сделать что-то вроде этого - может быть, с JQuery или CSS?

Answer 1

Вместо использования таблицы используйте неупорядоченный список. Убедитесь, что ширина самого неупорядоченного списка (или, возможно, его контейнера) - это процентная ширина (он будет масштабироваться до размера окна браузера). Поплавьте каждый из элементов <li> и укажите ширину, если вы хотите, чтобы они равного размера. Браузер сделает все для вас.

Пример:

HTML: 
<ul id="mydata"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 

CSS: 
ul#mydata { width: 90%; } 
    ul#mydata li { width: 450px; float: left; } /* Don't *have* to specify width */ 

Answer 2

Я искал и нашел только сам

Не используйте «стол», использовать «DIV с атрибутом стиля, установленным в„поплавок: левый“для каждого дел. .. и установить ширину и высоту блоков, он будет работать, как это:

<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div> 
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div> 
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div> 
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div> 
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div> 
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div> 

и попытаться изменить размер страницы, например

.

Надеюсь, что это поможет кому-то другому.

Cerdan