Футер в каждой ячейке таблицы

zoibana · February 26, 2010

Добрый день.

Есть большая проблема, которая застопорила весь процесс работы.

Существует таблица в 2 колонки с border-spacing: 5px; (cellpadding="5")

Каждой td задана граница 1px

В итоге получается некое подобие сетки по 2 блока одинаковой высоты в каждой строке. Соответственно, блоки в одной строке тянутся по высоте блока, имеющего максимальную высоту.

Ниже пример одной из строк

Количество текста в каждом блоке - неизвестно, по высоте - резина.

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

Проблема заключается в том, что очень нужно, чтобы эти блоки ссылок ВСЕГДА располагались только внизу каждого блока, а не как на картинке - сразу под текстом.

Перепробовал кучу способов (абсолютное позиционирование, все способы приклеивания футера и т.д.). Ничего из этого не работает так как это нужно.

Вариант с дополнительной строкой, куда будет вынесен этот футер - ОЧЕНЬ нежелателен, т.к. повторюсь - футера может и не быть, а это - лишние условия в шаблоне, лишний код, лишняя морока с раскраской границ и установкой cellpadding и прочий гемморой.

Это очень важно, т.к. в текущем варианте разметка каждого нового блока состоит всего из одного тега td и очень не хотелось бы сильно усложнять разметку.

Тому, кто сможет решить эту проблему максимально кроссбраузерно и просто, я готов заплатить 1000-2000р, в зависимости от лаконичности и простоты решения. Оплату гарантирую. Плюс к этому (может кому надо), отдам до 5 инвайтов на Google Wave.

Заранее благодарю.

zoibana · February 26, 2010

Вы не поверите.

Придется мне эти деньги попивать самому.

Нашел решение простое и элегантное!

В Quirks mode задаем ячейкам высоту 100%, внутрь ставим див в высотой 100%, делаем его relative и внутрь пихается футер с абсолютом.

Всем спасибо, пошел пить

Great Rash · February 26, 2010

Я уже сделал, но перед тем как запостить вам решение хотелось бы обговорить способ получения бабла. У меня нет web-кошелька, какие еще есть варианты?

UPD:

Эх плакали мои денежки

Может мне все-таки удастся че-нить получить если я скажу, что сделал решение для XHTML Strict?

zoibana · February 26, 2010

Если Ваше решение окажется легче и проще моего - оплачу.

Варианты оплаты - Яндекс.Деньги либо могу положить через терминал на телефон или, например, на интернет. Рассмотрю любые другие варианты.

Great Rash · February 26, 2010

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Фильтр</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		b {
			font-weight: bold;
		}

		table {
			width: 50%;
			border-spacing: 2px;
		}

		table table {
			width: 100%;
			border-spacing: 0;
		}

		table table td {
			border: 0;
		}

		td {
			vertical-align: top;
			border: 1px solid;
		}

		.border {
			border: 1px solid;
		}

		.top {
			border-bottom: 0;
		}

		.bottom {
			border-top: 0;
		}

		.center {
			width: 2px;
		}
	</style>
</head>

<body>

	<table>
		<tr>
			<td colspan="2" style="border: 0;">
				<table cellspacing="0">
					<tr>
						<td class="border top">
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
						</td>
						<td class="center">‌</td>
						<td class="border top">
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
							text text text<br />
						</td>
					</tr>
					<tr>
						<td class="border bottom">
							<b>text text text</b>
						</td>
						<td class="center">‌</td>
						<td class="border bottom">
							<b>text text text</b>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
			</td>
			<td>
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
				text text text<br />
			</td>
		</tr>
	</table>

</body>
</html>

zoibana · February 26, 2010

У Вас добавляются таблицы, а это, как я уже и писал, лишний код, лишние условия в шаблоне (т.к. футера в каком-то блоке может и не быть) на добавление-удаление ячеек и/или объединения ячеек, если в одном блоке есть футер, а в соседнем - нет.

В моем варианте добавляется всего один div и несколько строчек в css. При этом каждый блок остается независимым от соседнего.

Но, как оказалось, в моем варианте решения тоже есть косяки. Webkit браузеры не понимают height 100%, что оставляет вопрос открытым.

Условия меняются:

Тому, кто сможет побороть поведение height 100% (или эмулировать) в браузерах webkit, или предложит решение, схожее по простоте реализации, заплачу 1000р.

Sign In

Футер в каждой ячейке таблицы

Question

zoibana

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

zoibana

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

zoibana

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

zoibana

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information