hi Matias
thanks.... I have not use this in real project. but i made small improvement to handle the growth of a cell content. its still need more work to ajust the borders. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";><html> <head> <style> .table-wrapper { margin:0 auto; overflow:hidden; width:750px; } .table { float:left; width:750px; } .tr { float:left; width:100%; } .th { font-weight:bold; } .td { } .th, .td { border:1px solid red; float:left; padding:4px; width:32%; margin:-0.02em; } </style> </head> <body> <div class="table-wrapper"> <div class="table"> <div class="tr"> <div class="th">A</div> <div class="th">B</div> <div class="th">C</div> </div> <div class="tr"> <div class="td">D</div> <div class="td">Ehhh hfsdf sdf dg <br />sdfg df dfgdsf sdf dg sdfg df <br />dfgdsfgsfgsfg <br />sfdg sdfg sdfgsd fg</div> <div class="td">F</div> </div> <div class="tr"> <div class="td">G fgsdfgsdfg sfdg sfgsf gsdfsdfsdfsdfgsdfg sfdg sfgsf gsdfsdfsdfsdfgsdfg sfdg sfgsf gsdfsdfsdfsdfgsdfg sfdg sfgsf gsdfsdfsdfsdfs sfdgs dfgsdfg sdf</div> <div class="td">H</div> <div class="td">Idfdfg df gf sd fgsd fg sdfgs dfg sfd g sdfg sdfg sdfg sdfg </div> </div> </div> </div> </body> </html> Mohammed Alsharaf http://www.safitech.com From: [email protected] To: [email protected] Subject: [phpug] Re: Table to CSS Date: Sun, 17 May 2009 13:04:06 +1200 Hi Mohamad, I like your example, however it has one problem, wich is quite major if you really want to mimic a table: When one cell grows, all the others in the same row should grow aswell. Otherwise, the whole thing breaks. Eg: <div class="table-wrapper"> <div class="table"> <div class="th">A</div> <div class="th">B</div> <div class="th">C</div> <div class="td">D</div> <div class="td">Ehhh hfsdf sdf dg sdfg df dfgdsfgsfgsfg sfdg sdfg sdfgsd fg</div> <div class="td">F</div> <div class="td">G fgsdfgsdfg sfdg sfgsf gs sfdgs dfgsdfg sdf</div> <div class="td">H</div> <div class="td">Idfdfg df gf sd fgsd fg sdfgs dfg sfd g sdfg sdfg sdfg sdfg </div> </div> <div> Matias Gertel Freelance Web Development & Coding e: [email protected] m: +64 21 288 8840 p: +64 9 838 3367 On 16/05/2009, at 10:00 AM, S.Mohammed Alsharaf wrote: try this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";><html> <head> <style> .table-wrapper { margin:0 auto; overflow:hidden; width:750px; } .table { float:left; width:750px; } .th { font-weight:bold; } .td { } .th, .td { border:1px solid red; float:left; padding:4px; width:32%; margin:-0.02em; } </style> </head> <body> <div class="table-wrapper"> <div class="table"> <div class="th">A</div> <div class="th">A</div> <div class="th">A</div> <div class="td">A</div> <div class="td">A</div> <div class="td">A</div> <div class="td">A</div> <div class="td">A</div> <div class="td">A</div> </div> <div> </body> </html> hope it helps Mohammed Alsharaf http://www.safitech.com > Date: Sat, 16 May 2009 08:09:40 +1200 > Subject: [phpug] Re: Table to CSS > From: [email protected] > To: [email protected] > > > If you ask this question, you should probably get someone with CSS skills. > > It can be achieve with simple float: left but there are a barrage of > other techniques depending on the situation. > > On Sat, May 16, 2009 at 1:51 AM, Michael <[email protected]> wrote: > > > > I am converting a tabled layout to pure CSS... > > > > With tables, the DIV's went like this: > > > > X X X X X > > X X X X X > > > > Now they're like this: > > X > > X > > X > > X > > X > > etc.... > > > > What CSS option to I use for these DIV's to line them up in a row again? > > (previously achieved within a TR) > > > > Michael > > > > > > > > > > > -- > Blue Horn Ltd - System Development > http://bluehorn.co.nz > > _________________________________________________________________ Find a way to cure that travel bug MSN NZ Travel http://travel.msn.co.nz/ --~--~---------~--~----~------------~-------~--~----~ NZ PHP Users Group: http://groups.google.com/group/nzphpug To post, send email to [email protected] To unsubscribe, send email to [email protected] -~----------~----~----~----~------~----~------~--~---
