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

wcb-falcon · February 1, 2010

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

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

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

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

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 · February 1, 2010

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

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

rus · February 1, 2010

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

wcb-falcon · February 1, 2010

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

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

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

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

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

psywalker · February 1, 2010

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

wcb-falcon · February 1, 2010

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

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

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 · February 1, 2010

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

mini · February 1, 2010

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

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

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

Justnewone · February 1, 2010

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

rash · February 1, 2010

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

expee · February 1, 2010

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

wcb-falcon · February 1, 2010

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

один из вариантов решения внедрения 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 · February 1, 2010

один из вариантов решения внедрения 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 · February 1, 2010

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

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

wcb-falcon · February 1, 2010

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

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

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

Great Rash · February 1, 2010

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

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

Justnewone · February 1, 2010

Ваша позиция в корне неверна. Надо было объяснить заказчику, что он не прав.
Спорить на эту тему продолжать не буду ибо уже не раз спорили. И потом, это ваш геморрой, а не мой.

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

Sign In

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

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information