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
>
>
--~--~---------~--~----~------------~-------~--~----~
NZ PHP Users Group: http://groups.google.com/group/nzphpug
To post, send email to [email protected]
To unsubscribe, send email to
[email protected]
-~----------~----~----~----~------~----~------~--~---
