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

bacca · July 12, 2011

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

Есть таблица в три столбика, первый и третий фиксированы по ширине, средний резиновый. В среднем столбце - плавающие блоки (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 July 12, 2011 by bacca

leoni4 · July 12, 2011

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

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

<!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 July 12, 2011 by leoni4

bacca · July 12, 2011

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

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

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

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

Edited July 12, 2011 by bacca

SelenIT · July 12, 2011

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

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

bacca · July 12, 2011

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

Спасибо, буду знать.

Sign In

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

Question

bacca

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

leoni4

Link to comment

Share on other sites

bacca

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

bacca

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information