Hi,
I have been looking for an alternative for tbody thead to create a grid layout using div. Below code worked fine.
CSS
div#layout {display: table;}
div#layout {display: table;}
div.hgroupheader {display: table-row;background:gray;}
div.hgroup {display: table-row;}
div.cell {display: table-cell;border:solid 1px red;}
<div id="layout">
<div class="hgroupheader">
<div class="cell">Site Name</div>
<div class="cell">Site Url</div>
<div class="cell">Status</div>
</div>
<div class="hgroup">
<div class="cell">Google</div>
<div class="cell">google.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">Sitepoint</div>
<div class="cell">sitepoint.com</div>
<div class="cell">Awesome</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
</div>
I was looking to provide a scroll bar for section other than hgroupheader
I tried to enclose whole hgroup inside a div but it was confined to single column .
What change should i make to get the functionality i was looking for ?
Or is there any alternative for this ?
Hope someone could help me with this.
Thanks in Advance
You were on the right track with the containing div, but you were probably missing some styling. You can set the overflow of your container to either “scroll” (there is always ascrollbar) or “auto” (the scrollbar appears when the content overflows). I have pasted below the markup of the test page I created:
<style type=“text/css”>
Thanks for the help, that was what i’m looking
one more thing i need to know is there any way if we could adjust grid header based on the cell width.
If we look in to the current implementation grid header cells are not alligned with its child row cells.
rguy84
February 3, 2011, 1:40pm
4
Can I ask why you are not just styling a table? The accessibility and usuability of this is low.
rguy84 does make a good point. In this case, it is more semantically correct to use table tags, as you are effectively trying to display tabular data. Also, as far as I know IE 6 and 7 do not support very well these CSS table properties.
I was actually trying to create Grid Plugin which runs in Sench Touch,
If you look in to the screen shot, you could see header and body, the problem i was facing is i couldn’'t scroll the body part alone by keeping the header static.
So basically im looking for a grid layout were header is fixed and body part is scrollable.
Main thing i have missed is, im looking for layout which works in webkit
rguy84
February 3, 2011, 2:09pm
8
Did you try something like
tbody { scroll: Auto; }
I tried this and also assigned some height but not got worked
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
</head>
<body>
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 11 August 2008), see www.w3.org">
<title></title>
<style type="text/css">
tbody { scroll: auto; }
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color:red;">
<col style="background-color:blue;">
<col>
<col>
<col>
</colgroup>
<thead>
<tr >
<th >
<div >
<div >
<span >id</span>
</div>
<div ></div>
</div>
</th>
<th>
<div >
<div >
<span >date</span>
</div>
<div></div>
</div>
</th>
<th >
<div >
<div >
<span >quantity</span>
</div>
<div ></div>
</div>
</th>
<th >
<div>
<div>
<span >amount</span>
</div>
<div></div>
</div>
</th>
<th rowspan="1" colspan="1">
<div>
<div >
<span >title</span>
</div>
<div></div>
</div>
</th>
</tr>
</thead>
<caption>
DataTable Caption
</caption>
<tbody tabindex="0" >
<tr >
<td >
<div class="yui-dt-liner">
po-0167
</div>
</td>
<td >
<div class="yui-dt-liner">
03/24/1980
</div>
</td>
<td >
<div class="yui-dt-liner">
1
</div>
</td>
<td >
<div >
$4.00
</div>
</td>
<td >
<div>
A Book About Nothing
</div>
</td>
</tr>
<tr >
<td >
<div class="yui-dt-liner">
po-0167
</div>
</td>
<td >
<div class="yui-dt-liner">
03/24/1980
</div>
</td>
<td >
<div class="yui-dt-liner">
1
</div>
</td>
<td >
<div >
$4.00
</div>
</td>
<td >
<div>
A Book About Nothing
</div>
</td>
</tr>
<tr >
<td >
<div class="yui-dt-liner">
po-0167
</div>
</td>
<td >
<div class="yui-dt-liner">
03/24/1980
</div>
</td>
<td >
<div class="yui-dt-liner">
1
</div>
</td>
<td >
<div >
$4.00
</div>
</td>
<td >
<div>
A Book About Nothing
</div>
</td>
</tr>
<tr >
<td >
<div class="yui-dt-liner">
po-0167
</div>
</td>
<td >
<div class="yui-dt-liner">
03/24/1980
</div>
</td>
<td >
<div class="yui-dt-liner">
1
</div>
</td>
<td >
<div >
$4.00
</div>
</td>
<td >
<div>
A Book About Nothing
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</body>
</html>
clairs
February 3, 2011, 7:14pm
10
Why on earth have you put divs inside a td?
Its just a model that i have which used thead and tbody to create a grid. This structure i copied from somewhere.
rguy84
February 4, 2011, 8:04pm
12
yui-dt-liner tells me you got this from the YUI toolkit. That table looks ugly
You are correct ,i just got it from there, but i’m open to any which meet what i was looking for.
i have specified some height to tbody it doesn’t make any change.
Do you have any suggestion?
clairs
February 5, 2011, 10:42pm
14
For scrolling you need overflow: auto
