Jump to content
  • 0

Пошагово растягивающаяся таблица


bacca
 Share

Question

Приветствую.

Есть таблица в три столбика, первый и третий фиксированы по ширине, средний резиновый. В среднем столбце - плавающие блоки (float:left). Этих самых блоков допустим 10 штук. В зависимости от разрешения экрана в средний столбец влазит разное количество блоков. Проблема в том, что средний столбец растягивается на максимально возможую ширину, а хотелось бы, чтобы его ширина равнялась минимально возможной, но вмещала максимальное количество блоков. На данный момент решено с помощью JS, но хотелось бы решение поизящнее.

Если непонятно изложено, позже будут картинки.

ЗЫ Не слишком силен в верстке, сильно не пинайте))

кстати код:

<html>
<head>
<style>
body, body td {
margin:1px;
padding:1px;
font:normal 11px Tahoma, Arial;
border:1px solid #cccccc;
}
.mc {
border:1px solid #cccccc;
width:300px;
height:200px;
margin:1px;
padding:1px;
float:left;
}
</style>

<script language="javascript">
function ArrangeCats()
{
var node;
var ml = 0;

document.getElementById( 'tdm1' ).style.width = '';

for ( var i = 1; i <= 12; i++ )
{
node = document.getElementById( 'mc' + i );

if ( node.offsetLeft <= ml )
{
document.getElementById( 'tdm1' ).style.width = ( node.offsetWidth + 2 ) * ( i - 1 ) + 'px';
return;
}

ml = node.offsetLeft;
}
}
</script>
</head>

<body onLoad="ArrangeCats()" onResize="ArrangeCats()">
<div align=center>
<table>
<tr>
<td style="width:250px;vertical-align:top">FIRST COLUMN</td>
<td valign=top id="tdm1">
SECOND COLUMN
<div>
<div id="mc1" class="mc">FIRST BLOCK</div>
<div id="mc2" class="mc">SECOND BLOCK</div>
<div id="mc3" class="mc">THIRD BLOCK</div>
<div id="mc4" class="mc">FOURTH BLOCK</div>
<div id="mc5" class="mc">FIFTH BLOCK</div>
</div>
</td>
<td style="width:250px;vertical-align:top">THIRD COLUMN</td>
</tr>
</table>
</div>
</body>

</html>

Edited by bacca
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Ненавижу таблицы :)

но на вашем месте сделал бы вот так

<!DOCTYPE html>
<html>
<head>
<style>
body, body td {
margin:1px;
padding:1px;
font:normal 11px Tahoma, Arial;
border:1px solid #cccccc;
}
.mc {
border:1px solid #cccccc;
width:300px;
height:200px;
margin:1px;
padding:1px;
float:left;
}
@media screen and (min-width: 640px) {
#tdm1 {
width: 306px;
}
}
@media screen and (min-width: 1160px) {
#tdm1 {
width: 612px;
}
}
</style>
</head>

<body onLoad="ArrangeCats()" onResize="ArrangeCats()">
<div align="center">
<table>
<tr>
<td style="width:250px;vertical-align:top">FIRST COLUMN</td>
<td valign="top" id="tdm1">
SECOND COLUMN
<div>
<div id="mc1" class="mc">FIRST BLOCK</div>
<div id="mc2" class="mc">SECOND BLOCK</div>
<div id="mc3" class="mc">THIRD BLOCK</div>
<div id="mc4" class="mc">FOURTH BLOCK</div>
<div id="mc5" class="mc">FIFTH BLOCK</div>
</div>
</td>
<td style="width:250px;vertical-align:top">THIRD COLUMN</td>
</tr>
</table>
</div>
</body>

</html>

Великие ie 6-8 не поддерживают media-query, нужно сделать вот так:

    <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

и использовать вот этот скрипт

PS я использовал # в css только потому что не хотел менять ваш код, а вообще лучше конечно же классы

PSS и еще кое что, я догадался что скорее всего на вашем живом примере доктайп существует) но не ленитесь его писать, особенно если дело касается html5, уж очень он красивый :)

и абсолютно все атрибуты в разметке должны быть в двойных кавычках, я про ваше valign=top.

Edited by leoni4
Link to comment
Share on other sites

  • 0

Спасибо за ответ. В IE вылезло предупреждение об активном содержимом, что и смущало меня в моем методе(( В Опере полет нормальный. Честно говоря, мало понял из того, что вы сделали (интуитивно - предустановленная ширина столбца для двух состояний), но повторить не смогу)) Насчет доктайпа и кавычек - это просто набранный на скорую руку шаблон...

А valign вообще говорят устарел))

Вобщем это лучше чем у меня. IE всё портит.

Может быть это можно реализовать другими способами? Я, например, пробовал горизонтальными списками и div'ами с display:inline-block, правда с аналогичным результатом.

Edited by bacca
Link to comment
Share on other sites

  • 0
В IE вылезло предупреждение об активном содержимом

Такое только при тестировании локальных файлов вылезает. Если проверять по-нормальному, через http-сервер, ничего вылезать не будет.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy