SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grid Layout Using div?

    Hi,

    I have been looking for an alternative for tbody thead to create a grid layout using div. Below code worked fine.

    CSS

    Code:
     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;}
    HTML Code:
    <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

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Page</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">

    <style type="text/css">
    div#layout { overflow: table; }
    div.hgroupheader { display: table-row;background:gray; }
    div.hgroup { display: table-row; }
    div.cell { display: table-cell;border:solid 1px red; }
    div.scrollable { float:left; width:auto; overflow:auto; height:100px; padding-right:20px; }
    </style>
    </head>
    <body>
    <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="scrollable">
    <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 class="hgroup">
    <div class="cell">yahoo</div>
    <div class="cell">yahoo.com</div>
    <div class="cell">Cool</div>
    </div>
    <div class="hgroup">
    <div class="cell">yahoo</div>
    <div class="cell">yahoo.com</div>
    <div class="cell">Cool</div>
    </div>
    <div class="hgroup">
    <div class="cell">yahoo</div>
    <div class="cell">yahoo.com</div>
    <div class="cell">Cool</div>
    </div>
    <div class="hgroup">
    <div class="cell">yahoo</div>
    <div class="cell">yahoo.com</div>
    <div class="cell">Cool</div>
    </div>
    <div class="hgroup">
    <div class="cell">yahoo</div>
    <div class="cell">yahoo.com</div>
    <div class="cell">Cool</div>
    </div>
    <div class="hgroup">
    <div class="cell">yahoo</div>
    <div class="cell">yahoo.com</div>
    <div class="cell">Cool</div>
    </div>
    </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Can I ask why you are not just styling a table? The accessibility and usuability of this is low.
    Ryan B | My Blog | Twitter

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was actually trying to create Grid Plugin which runs in Sench Touch,
    for this i would like to get the HTML fixed so that i could dynamically create rows based on the values that i have.

    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.
    Attached Images Attached Images

  6. #6
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Main thing i have missed is, im looking for layout which works in webkit

  8. #8
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Did you try something like
    Code css:
    tbody { scroll: Auto; }
    Ryan B | My Blog | Twitter

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this and also assigned some height but not got worked

    Code:
    <!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>

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why on earth have you put divs inside a td?

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its just a model that i have which used thead and tbody to create a grid. This structure i copied from somewhere.
    .

  12. #12
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    yui-dt-liner tells me you got this from the YUI toolkit. That table looks ugly
    Ryan B | My Blog | Twitter

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For scrolling you need overflow: auto


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •