Равномерно разместить содержимое ячеек таблицы.

[ХОЛОДный]

Есть таблица. В одной из её ячеек помещена еще одна таблица.

<td colspan="2">

<table width="100%">

<tr>

<td><img src="/images/main/1.jpg"/></td>

<td><img src="/images/main/2.jpg"/></td>

<td><img src="/images/main/3.jpg"/></td>

<td><img src="/images/main/4.jpg"/></td>

<td><img src="/images/main/5.jpg"/></td>

<td><img src="/images/main/6.jpg"/></td>

</tr>

</table>

</td>

Как сделать так, чтобы первая ячейка прижалась влево, последняя - к правому краю.

А оставшиеся 4 ячейки распределились по свободному месту между первой и последней?

Размер картинок известен и для всех шести одиноков.

Спасибо.

[Great Rash]

Указать для всех ячеек одинаковую штрину, например в вашем случае 100% / 6 = 16.6%.

Хотя судя по приведенному вами коду у вас и так ячейки должны равномерно по ширине растянуться.

[ХОЛОДный]

Только картинка внутри ячейки в 16.6% от общей величины в крайней левой ячейке будет выровнена по левому краю.

Картинка в крайне правой - по крайне правому краю.

Из-за этого "равномерности" не получится.

У меня шесть картинок, каждая в ячейке таблицы.

Первую я приживаю к левому краю, последнюю - к правому. На оставшемся месте надо равномерно распределить 4 картинки.

[Great Rash]

Выравнивайте все по центру, в чем проблема? Может для наглядности картинку выложите как есть и как надо?

[ХОЛОДный]

Если я всё выровню по центру, то крайняя левая и крайняя правая не будут прижаты к краям, а это обязательное условие.

Да, с картинкой будет понятнее, прошу прощения, выложу через некоторое время.

[oknechirik]

Если я всё выровню по центру, то крайняя левая и крайняя правая не будут прижаты к краям, а это обязательное условие.

Да, с картинкой будет понятнее, прошу прощения, выложу через некоторое время.

между ячейками с картинками добавьте пустые ячейки, дав им ширину auto

а ячейкам с картинками укажите ширину картинок.

для пущей надежности можно еще таблице прописать {table-layout: fixed}, но должно и без этого работать

[ХОЛОДный]

между ячейками с картинками добавьте пустые ячейки, дав им ширину auto

а ячейкам с картинками укажите ширину картинок.

для пущей надежности можно еще таблице прописать {table-layout: fixed}, но должно и без этого работать

Работает даже без

{table-layout: fixed}

Как просто, спасибо!

[ХОЛОДный]

Работает даже без

{table-layout: fixed}

Как просто, спасибо!

Странно, в ФФ вестка выглядит нормально:

6 шартинок "равномерно" расползлись по таблице, а ячейки между ними получили правильную ширину: (ширина_таблицы-100*6) / 5.

Где 6 - кол-во картинок, 100 = 100 пикселей.

table{
	border:none;
	border-collapse:collapse;
	padding: 0em;
}
table td{
	border: none;
	padding: 0em;
}
.separator{
	width:auto;
}
.imgTD{
	width: 100px;
}

<td colspan="2">
	  <table width="100%" id="#photoTbl" style=""><!-- table-layout:fixed; -->
		<tr>
		  <td class="imgTD" align="left"><img src="/images/main/1.jpg"/></td>
		  <td class="separator"></td>
		  <td class="imgTD"><img src="/images/main/2.jpg"/></td>
		  <td class="separator"></td>
		  <td class="imgTD"><img src="/images/main/3.jpg"/></td>
		  <td class="separator"></td>
		  <td class="imgTD"><img src="/images/main/4.jpg"/></td>
		  <td class="separator"></td>
		  <td class="imgTD"><img src="/images/main/5.jpg"/></td>
		  <td class="separator"></td>
		  <td class="imgTD" align="right"><img src="/images/main/6.jpg"/></td>
		</tr>
	  </table>
	</td>

Однако, ВебКит (Сафари, Хром) интерпретируют теги по-другому:

все ячейки класса separator получили ширину в 1 пиксель, а ячейки с картинками - (ширина_таблицы-5) / 6.

где - 5, это 5 пикселей, по одному пикселю на separator ячейку. 6 - кол-во ячеек с картинками.

Если использовать

{table-layout:fixed;}

В таблице с шестью картинками, то это отражается на всей странице, она как-то расползается, что не есть гут.

Это вообще решаемая задача, может, Джаваскиптом при загрузке документа расчитывать ширину каждой ячейки?

P.S.

Похоже, display:block; в классе .separator решил проблему.

Edited July 25, 2009 by ХОЛОДный