Таблица но на Дивах

[wcb-falcon]

ту задался решением создать таблицу на дивах.

в принципе все было хорошо до того момента пока не понадобилось настроить высоту

при жестко заданной высоте и превышению текста был вариант либо спрятать переполнение либо в ручную настраивать высоту каждой строки (что совсем не вариант )

если кто сталкивался с такими вопросами и решил их подскажите как

P.S. главная задача не использовать <TABLE>

пример кода:

CSS

<style type="text/css">
#tbl{
	width:100%;
}
.widtbl{
	width:310px;
	border-top: 4px solid #000;
}
.bottom{
	border-bottom: 3px solid #000;
	float: left;
	width: 310px;
}

.row_1{
	width:50px;
	border-left: 4px solid #000;
	border-bottom: 1px solid #000;
}
.row_2{
	width:150px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}
.row_3{
	width:100px;
	border-right: 4px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}
.row_1,
.row_2,
.row_3{
	float:left;
	overflow: hidden;
	background-color: #CCC;
}
.header {
	height:20px;
	font-weight: bold;
	text-align:center;
}
</style>

HTML:

<div id="tbl">
	<div class="widtbl">
		<div class="row_1 header">№</div>
		<div class="row_2 header">описание</div>
		<div class="row_3 header">название</div>

		<div class="row_1">123123</div>
		<div class="row_2">123 123123 123 1231 231231 23123123 1231231 2312 </div>
		<div class="row_3">1231 23123 123 123 1 23123 1231231</div>

		<div class="row_1">123111232</div>
		<div class="row_2">asd asd adfas dfasdf asdfasd fasd f</div>
		<div class="row_3">asdf asdfasdfasdfasdf asdfasd asdfa sdfa sdf asd f</div>

		<div class="bottom"></div>
	</div>
</div>

вот визуально что получается и что хотелось

[Great Rash]

Главный вопрос: зачем?

Второй вопрос: вы знаете, что такое "двухколоночный макет с колонками одинаковой высоты" и как его реализовать на дивах? Если да, то чем не подходит это решение? Если нет, то почему бы не почитать об этом?

[rus]

Думаю тут нужно св-во дисплей:инлайн-тейбл

[wcb-falcon]

зачем? -> ну к примеру есть проэкт в котором нельзя использовать <table> (запрещено заказчиком) но есть небольшая таблица которая должна выглядет как таблица.

ну и вообще как бы возник такой вопрос и хочется знать способы его решения

Думаю тут нужно св-во дисплей:инлайн-тейбл

данное свойство не приведет ни к какому результату (по крайней мере у меня не вышло)

Про двухколоночный макет читал просто не воспользовался им изначально для решения акой задачи сейчас пробую что получится и на сколько все это загромаздится

[psywalker]

Гонево. Нужно использовать либо таблицу, а если принципиально не хочешь, тогда просто обрезай границы нахрен.

[wcb-falcon]

помогло решение от двух-колоночного макета одинаковой высоты.

что не все блоки сдвигать флоатам а последний отодвинуть рейдингом

CSS

<style type="text/css">
#tbl{
	width:100%;
}
.widtbl{
	width:90%;
	overflow:hidden;
	background-color: #CCC;
	border: 4px solid #000;
}
#tbl .row_1{
	width:50px;
	float:left;
}
#tbl .row_2{
	width:150px;
	float:left;
}
#tbl .row_3{
	padding-left:200px;
}
#tbl .header {
	height:20px;
	font-weight: bold;
	text-align:center;
	background-color: #999;
}
#tbl div.clear {
	clear: both;
	height:0px;
	border-bottom: 1px dotted #F00;
}
</style>

HTML

<div id="tbl">
	<div class="widtbl">
		<div class="row_1 header">№</div>
		<div class="row_2 header">описание</div>
		<div class="row_3 header">название</div>
		<div class="clear"></div>
		<div class="row_1">123</div>
		<div class="row_2">123 123123 123 1231 231231 2312</div>
		<div class="row_3">1231 23123 123 123 1 23123 1231123 12</div>
		<div class="clear"></div>
		<div class="row_1">5673</div>
		<div class="row_2">asd asd adfas dsdfasdf asdfasasdf asdfasasdf asdfasd asasdf asdfasd fasd f</div>
		<div class="row_3">asdf asdfasdfadfa sdfa sdf asd f</div>
		<div class="clear"></div>
		<div class="row_1">5673 12 312 312 313 123 </div>
		<div class="row_2">asd asd adfas dsdfasdf asdfasasdf asdfasasdf asdfasd asasdf asdfasd fasd f</div>
		<div class="row_3">asdf asdfasdfadfa sdfa sdf asd f</div>
	</div>
</div>

единственное не удалось решить проблему Левой и Правой границы для ячеек (в высоту они получаются только по высоте контента к которому присвоен будет бордер.

Хотелось бы конечно и ее постараться решить.

Edited February 1, 2010 by wcb-falcon

[psywalker]

сделай бордер фоном, подставь отступ в %

[mini]

захотелось тоже отписаться и выразить своё мнение:

1. моте все же на списках лутше получится!

2. и когда говорится запрещается использовать таблицы, это имеется ввиду для глобальной разметки, а табличные данные нужно делать таблицами, иначе это бред!

[Justnewone]

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

[rash]

Если заказчик боится таблиц, бойтесь такого заказчика. Таблица должна быть таблицей.

[expee]

Наверное заказчик наслушался про то, что нужно верстать на дивах и запретил таблицы Таблицы должны быть таблицами, а верстка на дивах.

[wcb-falcon]

фоном бордер не выйдет ибо ячейки не под беграундом (фон в основной таблице) если ячейки залить другим цветом то по окончанию контента будет виден вон основного блока шириной от контента до подвала (что есть само собой уже косяк)

один из вариантов решения внедрения 1пикс беграунда повторяющегося по вертикале в нужной позиции (для 3-х колонок придется вводить еще одну внешнюю оболочку)

.widtbl{
	width:90%;
	overflow:hidden;
	background-color: #CCC;
	border: 4px solid #000;
	background-image:url('1b.jpg');
	background-repeat:repeat-y;
	background-position: 50px 0px;
}
.widtbl2{
	overflow:hidden;
	background-image:url('1b.jpg');
	background-repeat:repeat-y;
	background-position: 200px 0px;
}

<div id="tbl">
	<div class="widtbl">
	<div class="widtbl2">
		<div class="row_1 header">№</div>
...

[psywalker]

один из вариантов решения внедрения 1пикс беграунда повторяющегося по вертикале в нужной позиции (для 3-х колонок придется вводить еще одну внешнюю оболочку)

.widtbl{
	width:90%;
	overflow:hidden;
	background-color: #CCC;
	border: 4px solid #000;
	background-image:url('1b.jpg');
	background-repeat:repeat-y;
	background-position: 50px 0px;
}
.widtbl2{
	overflow:hidden;
	background-image:url('1b.jpg');
	background-repeat:repeat-y;
	background-position: 200px 0px;
}

<div id="tbl">
	<div class="widtbl">
	<div class="widtbl2">
		<div class="row_1 header">№</div>
...

Я это и имел ввиду

[Great Rash]

ну к примеру есть проэкт в котором нельзя использовать <table> (запрещено заказчиком) но есть небольшая таблица которая должна выглядет как таблица

заказчик - идиот

[wcb-falcon]

пусть он трижды идиот но "желание клиента - закон"

главное чтобы ему понравилось чтобы его убложить

как говориться "... есть задача - реши ее ..."

[Great Rash]

Ваша позиция в корне неверна. Надо было объяснить заказчику, что он не прав.

Спорить на эту тему продолжать не буду ибо уже не раз спорили. И потом, это ваш геморрой, а не мой.

[Justnewone]

Ваша позиция в корне неверна. Надо было объяснить заказчику, что он не прав.

Спорить на эту тему продолжать не буду ибо уже не раз спорили. И потом, это ваш геморрой, а не мой.

Клиент всегда прав, когда я не очень в себе уверен. Фарс