Help with a Tableless Table

8th March 07, 03:47 PM

Here is my dilemma, I'm trying to creates a Tableless Table.... but I can not manage to get all the cells(<p>) to be the same height, without hard coding it. I would like for them to be the same height of the largest cell(class="td c05"). The largest cell expands the height of containing div (id="tr"). I tried several methods, but to no avail. Hoping I could get a little assistance. Thanks in advance.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
	#faketable { font-family:Tahoma, Arial; font-size:0.7em; padding:5px; background-color:#FFF; width:auto; margin-bottom:25px;}
	#table { width:auto;}
	#th { color:#fff; font-weight:bold;}
	p {}
	html>body p { margin:0px;}
	
	#table .td, #th .td1 { float: left; padding:0px; margin:0px; border:1px solid #BEBEBE;}
	#table .td { padding:0; display:block; height:auto;}
	#tr { min-height:30px; height:auto !important; height:30px; width:auto; border:0px solid #C00;}
	/*#table .td p { margin:0 auto; vertical-align:middle; height:80%; border:0px solid #C00;}
	#heighttest { border:1px solid #0F0; margin:0; height:50px;}*/
	#th .td1 { height:40px; vertical-align:bottom; background-color:#7291B6; text-align:center;}
	#table input { border:1px solid #C0C0C0; font:normal 9px Verdana, Arial, Helvetica; margin:0px;}

	.c01 { width:22px; text-align:center;} /* Alerts */
	.c02 { width:22px; text-align:center;} /* Select */
	.c03 { width:30px; text-align:center;} /* Line */
	.c04 { width:50px; text-align:center;} /* Tessco Part No. */
	.c05 { width:40px; text-align:center;} /* Qty */
	.c06 { width:170px;} /* Description */
	.c07 { width:30px;} /* UOM */
	.c08 { width:30px; text-align:center;} /* Ship */
	.c09 { width:30px; text-align:center;} /* Due */
	.c10 { width:40px; text-align:center;} /* Warehouse */
	.c11 { width:70px;} /* List Price */
	.c12 { width:70px;} /* Your Price */
	.c13 { width:70px;} /* Std Price */
	.c14 { width:70px;} /* Std Column*/
	.c15 { width:70px;} /* Custom Price */
	.c16 { width:70px;}	/* Custom Column */
	.c17 { width:70px;} /* Extended Price */
	.c18 { width:22px; text-align:center;}	/* Delete */
</style>

</head>

<body>
<div id="faketable">
	<div id="table">
		<div id="th">
			<div class="td1 c01">A</div>
			<div class="td1 c02">S</div>
			<div class="td1 c03">LINE</div>
			<div class="td1 c04">TESSCO<br>PART<br>NO.</div>
			<div class="td1 c05">QTY</div>
			<div class="td1 c06">MFG/DESCRIPTION</div>
			<div class="td1 c07">UOM</div>
			<div class="td1 c08">SHIP</div>	
			<div class="td1 c09">DUE</div>
			<div class="td1 c10">WARE<br>HOUSE</div>
			<div class="td1 c11">LIST<br>PRICE</div>
			<div class="td1 c12">YOUR<br>PRICE</div>
			<div class="td1 c13">STD<br>PRICE</div>
			<div class="td1 c14">STD<br>COLUMN</div>
			<div class="td1 c15">CUSTOM<br>PRICE</div>
			<div class="td1 c16">CUSTOM<br>COLUMN</div>						
			<div class="td1 c17">EXTENDED<br>PRICE</div>
			<div class="td1 c18">&nbsp;</div>
			<div style="clear: both;"></div>
		</div>
		<div id="tr">
			<p class="td c01"><img src="alerts_alert.gif"></p>
			<p class="td c02"><input name="select"  type="checkbox"></p>
			<p class="td c03">11.</p>
			<p class="td c04">123456</p>
			<p class="td c05"><input name="quantities" maxlength="5" size="4" value="1" onblur="changeQuantity(this)" class="rx_border" type="text"></p>
			<p class="td c06">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar malesuada dolor. Maecenas turpis diam, rhoncus a, gravida sit amet, semper ut, massa. Cras vel odio. Donec elementum lectus et.</p>
			<p class="td c07">1<br>EACH</p>
			<p class="td c08">100</p>
			<p class="td c09">12/30</p>
			<p class="td c10">HUN</p>
			<p class="td c11">$1.00</p>
			<p class="td c12">$2.00</p>						
			<p class="td c13">Alark</p>
			<p class="td c14">Column1</p>
			<p class="td c15">$4.00</p>
			<p class="td c16">Coulmn2</p>
			<p class="td c17">$5.00</p>
			<p class="td c18"><img src="worksheet_files/trash_up.gif"></p>
			<p style="clear: both;"></p>
		</div>
	</div>
</div>
</body>
</html>

Yes I know its not compliant, but at this point I could care less.
A:F6

zak · 8th March 07, 08:21 PM

The only way I can think of would be to use an adaptation of faux columns to make it look like the cells stretch the full height of the rows. Just make a repeated white bg with grey separating pixels at the correct positions. The one caveat here is that you'd need the table and each column to have static widths.

What I really think the best solution would be is to actually use a <table>. It appears you're trying to display tabular data, which is a completely valid (re: only valid) use of tables if you care about standards. If you dont care about standards, then I still say use a table... it would be a hell of a lot easier.

Then again maybe someone else can figure out a way to stretch those <p>s

8th March 07, 08:30 PM

Cool... thanks for the help. You're right tables would be valid here and thats the way it is right now.... I was just trying to see if it was possible to do it without a table, but get the same look. I think the developers I work with... would prefer the data to be in divs... I just a mere designer... I get paid to make it pretty... then darn it... I better make it pretty.

chrishirst · 10th March 07, 08:14 AM

something I played with long ago now CSS Table Style

8th March 07, 08:21 PM	#2
zak WLC Member Join Date: Mar 2007 Location: Troy, NY Posts: 24	Re: Help with a Tableless Table The only way I can think of would be to use an adaptation of faux columns to make it look like the cells stretch the full height of the rows. Just make a repeated white bg with grey separating pixels at the correct positions. The one caveat here is that you'd need the table and each column to have static widths. What I really think the best solution would be is to actually use a <table>. It appears you're trying to display tabular data, which is a completely valid (re: only valid) use of tables if you care about standards. If you dont care about standards, then I still say use a table... it would be a hell of a lot easier. Then again maybe someone else can figure out a way to stretch those <p>s

8th March 07, 08:30 PM	#3
slmcdee Guest Posts: n/a	Re: Help with a Tableless Table Cool... thanks for the help. You're right tables would be valid here and thats the way it is right now.... I was just trying to see if it was possible to do it without a table, but get the same look. I think the developers I work with... would prefer the data to be in divs... I just a mere designer... I get paid to make it pretty... then darn it... I better make it pretty.

10th March 07, 08:14 AM	#4
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Help with a Tableless Table something I played with long ago now CSS Table Style

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css table	flann	CSS	6	7th August 07 11:36 PM
Is this possbile? Table converted to CSS	phill2000star	CSS	5	15th January 07 01:43 PM
Borders not showing up in table from external style sheet	seclev77	HTML & XHTML	3	9th January 07 06:40 PM
To table or not to table	Scatropolis	CSS	15	8th November 06 07:50 PM
Can't get rid of table cells	Jen	CSS	10	7th July 06 06:41 AM