SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML/CSS datagrid

    I have a datagrid I am fleshing out that will eventually have sortable cols. My intention was to use as much CSS as possible w/o any hacks which will more cross-browser compatible than using the thead/tbody solution. So far I have a working grid that I've tested in IE 5,5.5,6,7, Firefox 1.5, Opera 8.5,9 and Konq 3. I am assuming this probably works in Safari.

    1. When setting the grid tables to 100% width, there are issues in lining up the columns as well as as IE6 setting the scrollbar outside the grid. Using fixed table/div widths fixed this.
    2. You can set the #test2 div CSS selector to an additional 19px and it puts the scrollbar outside of the grid in all browsers and exposes the full right column. This works in all browsers except Opera 8 as you cannot grab the scrollbar.
    3. Konq does not work with mouse wheel scrolling.
    4. The CSS classes in the td cells will be used for the JS sorting.
    5. The table-layout in #test2 table and the overflow:hidden in #test2 td properties are used to clip content that may force a datacell to expand with long strings. This doesn't work in Konq.

    Any ideas on improving this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    body 
    { 
        background: buttonface; 
    }
    #test2 
    { 
        width: 800px; 
    }
    #test2 td 
    { 
        overflow: hidden;
        font-size: 11px;
        font-family: tahoma,sans-serif;
        background: #fff;
        padding: 2px 8px 2px 2px;
        border-bottom: 1px solid #bbb;
    }
    #test2 th 
    { 
        cursor: pointer;
        text-align: left;
        font-weight: normal;
        padding: 2px;
        font-size: 11px;
        font-family: tahoma,sans-serif;
        border: 1px solid;
        border-color:#fff #bbb #bbb #fff; 
        border-bottom: 2px solid #bbb;
     
    }
    #test2 th:hover 
    { 
        border-bottom: 2px solid gold; 
        background: #fff; 
    }
    #test2 table 
    { 
        table-layout: fixed; 
        width: 800px; 
    }
    #test2 div 
    {
        width: 800px; 
        height: 200px;
        overflow: auto;
        border-left: 1px solid #ccc;
        border-bottom: 0px solid #ccc;
    }
    -->
    </style>
    </head>
    <body>
    <div id="test2">
    <table summary="grid header" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th id="test2_0" onclick="alert('Sort test2_0');" style="width:25%;">First Name</th>
    <th id="test2_1" onclick="alert('Sort test2_1');" style="width:25%;">Last Name</th>
    <th id="test2_2" onclick="alert('Sort test2_2');" style="width:25%;">Email</th>
    <th id="test2_3" onclick="alert('Sort test2_3');" style="width:25%;">Acct</th>
    </tr>
    </table>
    <div>
    <table id="test2_data" summary="grid data" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="test2_0" style="width:25%;">Zelda</td>
    <td class="test2_1" style="width:25%;">Rogers</td>
    <td class="test2_2" style="width:25%;">zeldarogers@mail.com</td>
    <td class="test2_3" style="width:25%;">20037281</td>
    </tr><tr>
    <td class="test2_0">Norma</td>
    <td class="test2_1">King</td>
    <td class="test2_2">normaking@mail.com</td>
    <td class="test2_3">20029698</td>
    </tr><tr>
    <td class="test2_0">Gunther</td>
    <td class="test2_1">Givens</td>
    <td class="test2_2">gunthergivens@mail.com</td>
    <td class="test2_3">200622507</td>
    </tr><tr>
    <td class="test2_0">Francis</td>
    <td class="test2_1">James</td>
    <td class="test2_2">francisjames@mail.com</td>
    <td class="test2_3">200025862</td>
    </tr><tr>
    <td class="test2_0">Mike</td>
    <td class="test2_1">King</td>
    <td class="test2_2">mikeking@mail.com</td>
    <td class="test2_3">19998692</td>
    </tr><tr>
    <td class="test2_0">Martha</td>
    <td class="test2_1">Wilkes</td>
    <td class="test2_2">marthawilkes@mail.com</td>
    <td class="test2_3">200410431</td>
    </tr><tr>
    <td class="test2_0">Howie</td>
    <td class="test2_1">Rogers</td>
    <td class="test2_2">howierogers@mail.com</td>
    <td class="test2_3">20021144</td>
    </tr><tr>
    <td class="test2_0">Mike</td>
    <td class="test2_1">Funderburk</td>
    <td class="test2_2">mikefunderburk@mail.com</td>
    <td class="test2_3">200628553</td>
    </tr><tr>
    <td class="test2_0">Howie</td>
    <td class="test2_1">James</td>
    <td class="test2_2">howiejames@mail.com</td>
    <td class="test2_3">200431656</td>
    </tr><tr>
    <td class="test2_0">Kerry</td>
    <td class="test2_1">Wilkes</td>
    <td class="test2_2">kerrywilkes@mail.com</td>
    <td class="test2_3">199924166</td>
    </tr><tr>
    <td class="test2_0">Martha</td>
    <td class="test2_1">Black</td>
    <td class="test2_2">marthablack@mail.com</td>
    <td class="test2_3">200419705</td>
    </tr><tr>
    <td class="test2_0">Zelda</td>
    <td class="test2_1">Dearman</td>
    <td class="test2_2">zeldadearman@mail.com</td>
    <td class="test2_3">20047896</td>
    </tr><tr>
    <td class="test2_0">Nancy</td>
    <td class="test2_1">Tubman</td>
    <td class="test2_2">nancytubman@mail.com</td>
    <td class="test2_3">20041331</td>
    </tr><tr>
    <td class="test2_0">Alice</td>
    <td class="test2_1">Rogers</td>
    <td class="test2_2">alicerogers@mail.com</td>
    <td class="test2_3">20041530</td>
    </tr><tr>
    <td class="test2_0">Martha</td>
    <td class="test2_1">Givens</td>
    <td class="test2_2">marthagivens@mail.com</td>
    <td class="test2_3">200221383</td>
    </tr><tr>
    <td class="test2_0">Quentin</td>
    <td class="test2_1">Graham</td>
    <td class="test2_2">quentingraham@mail.com</td>
    <td class="test2_3">200023122</td>
    </tr><tr>
    <td class="test2_0">Zelda</td>
    <td class="test2_1">Funderburk</td>
    <td class="test2_2">zeldafunderburk@mail.com</td>
    <td class="test2_3">200525002</td>
    </tr><tr>
    <td class="test2_0">Kerry</td>
    <td class="test2_1">Adams</td>
    <td class="test2_2">kerryadams@mail.com</td>
    <td class="test2_3">200128278</td>
    </tr><tr>
    <td class="test2_0">Glenda</td>
    <td class="test2_1">Wilkes</td>
    <td class="test2_2">glendawilkes@mail.com</td>
    <td class="test2_3">200310064</td>
    </tr><tr>
    <td class="test2_0">Marcel</td>
    <td class="test2_1">Dearman</td>
    <td class="test2_2">marceldearman@mail.com</td>
    <td class="test2_3">20046027</td>
    </tr><tr>
    <td class="test2_0">Alvin</td>
    <td class="test2_1">Cohen</td>
    <td class="test2_2">alvincohen@mail.com</td>
    <td class="test2_3">20061152</td>
    </tr><tr>
    <td class="test2_0">Bill</td>
    <td class="test2_1">Rogers</td>
    <td class="test2_2">billrogers@mail.com</td>
    <td class="test2_3">200626609</td>
    </tr><tr>
    <td class="test2_0">Kareem</td>
    <td class="test2_1">Graham</td>
    <td class="test2_2">kareemgraham@mail.com</td>
    <td class="test2_3">20029058</td>
    </tr><tr>
    <td class="test2_0">Sammy</td>
    <td class="test2_1">Wilkes</td>
    <td class="test2_2">sammywilkes@mail.com</td>
    <td class="test2_3">20009257</td>
    </tr><tr>
    <td class="test2_0">Xena</td>
    <td class="test2_1">Fox</td>
    <td class="test2_2">xenafox@mail.com</td>
    <td class="test2_3">200627270</td>
    </tr><tr>
    <td class="test2_0">Martha</td>
    <td class="test2_1">Tubman</td>
    <td class="test2_2">marthatubman@mail.com</td>
    <td class="test2_3">200628735</td>
    </tr><tr>
    <td class="test2_0">Martha</td>
    <td class="test2_1">Capo</td>
    <td class="test2_2">marthacapo@mail.com</td>
    <td class="test2_3">200018538</td>
    </tr><tr>
    <td class="test2_0">Alice</td>
    <td class="test2_1">Wilkes</td>
    <td class="test2_2">alicewilkes@mail.com</td>
    <td class="test2_3">200013009</td>
    </tr><tr>
    <td class="test2_0">Glenda</td>
    <td class="test2_1">Rogers</td>
    <td class="test2_2">glendarogers@mail.com</td>
    <td class="test2_3">199910295</td>
    </tr><tr>
    <td class="test2_0">Quentin</td>
    <td class="test2_1">Funderburk</td>
    <td class="test2_2">quentinfunderburk@mail.com</td>
    <td class="test2_3">20029232</td>
    </tr><tr>
    <td class="test2_0">Yolanda</td>
    <td class="test2_1">King</td>
    <td class="test2_2">yolandaking@mail.com</td>
    <td class="test2_3">200026415</td>
    </tr><tr>
    <td class="test2_0">Yolanda</td>
    <td class="test2_1">Capo</td>
    <td class="test2_2">yolandacapo@mail.com</td>
    <td class="test2_3">20053367</td>
    </tr><tr>
    <td class="test2_0">Nancy</td>
    <td class="test2_1">James</td>
    <td class="test2_2">nancyjames@mail.com</td>
    <td class="test2_3">200418878</td>
    </tr><tr>
    <td class="test2_0">Nancy</td>
    <td class="test2_1">Capo</td>
    <td class="test2_2">nancycapo@mail.com</td>
    <td class="test2_3">200326712</td>
    </tr><tr>
    <td class="test2_0">Benny</td>
    <td class="test2_1">Trudeau</td>
    <td class="test2_2">bennytrudeau@mail.com</td>
    <td class="test2_3">200112804</td>
    </tr><tr>
    <td class="test2_0">Don</td>
    <td class="test2_1">Tubman</td>
    <td class="test2_2">dontubman@mail.com</td>
    <td class="test2_3">200029875</td>
    </tr><tr>
    <td class="test2_0">Gunther</td>
    <td class="test2_1">Trudeau</td>
    <td class="test2_2">gunthertrudeau@mail.com</td>
    <td class="test2_3">200518219</td>
    </tr><tr>
    <td class="test2_0">Kareem</td>
    <td class="test2_1">Horowitz</td>
    <td class="test2_2">kareemhorowitz@mail.com</td>
    <td class="test2_3">200111015</td>
    </tr><tr>
    <td class="test2_0">Alice</td>
    <td class="test2_1">Smith</td>
    <td class="test2_2">alicesmith@mail.com</td>
    <td class="test2_3">200617868</td>
    </tr><tr>
    <td class="test2_0">Don</td>
    <td class="test2_1">Wilkes</td>
    <td class="test2_2">donwilkes@mail.com</td>
    <td class="test2_3">200321494</td>
    </tr><tr>
    <td class="test2_0">Quentin</td>
    <td class="test2_1">James</td>
    <td class="test2_2">quentinjames@mail.com</td>
    <td class="test2_3">200011469</td>
    </tr><tr>
    <td class="test2_0">Don</td>
    <td class="test2_1">Rogers</td>
    <td class="test2_2">donrogers@mail.com</td>
    <td class="test2_3">200510373</td>
    </tr><tr>
    <td class="test2_0">Nancy</td>
    <td class="test2_1">Dearman</td>
    <td class="test2_2">nancydearman@mail.com</td>
    <td class="test2_3">20061842</td>
    </tr><tr>
    <td class="test2_0">Marcel</td>
    <td class="test2_1">Trudeau</td>
    <td class="test2_2">marceltrudeau@mail.com</td>
    <td class="test2_3">200415605</td>
    </tr><tr>
    <td class="test2_0">Benny</td>
    <td class="test2_1">Lomax</td>
    <td class="test2_2">bennylomax@mail.com</td>
    <td class="test2_3">200310711</td>
    </tr><tr>
    <td class="test2_0">Kerry</td>
    <td class="test2_1">Trudeau</td>
    <td class="test2_2">kerrytrudeau@mail.com</td>
    <td class="test2_3">19995549</td>
    </tr><tr>
    <td class="test2_0">Alvin</td>
    <td class="test2_1">King</td>
    <td class="test2_2">alvinking@mail.com</td>
    <td class="test2_3">20001840</td>
    </tr><tr>
    <td class="test2_0">Mike</td>
    <td class="test2_1">Horowitz</td>
    <td class="test2_2">mikehorowitz@mail.com</td>
    <td class="test2_3">20053144</td>
    </tr><tr>
    <td class="test2_0">Sammy</td>
    <td class="test2_1">Cohen</td>
    <td class="test2_2">sammycohen@mail.com</td>
    <td class="test2_3">200430819</td>
    </tr><tr>
    <td class="test2_0">Kerry</td>
    <td class="test2_1">Black</td>
    <td class="test2_2">kerryblack@mail.com</td>
    <td class="test2_3">200031198</td>
    </tr>
    </table>
    </div>
    </div>
    </body> 
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If you increase the width of the #test2 div (as you said) then you can lose the horizontal scrollbar which is messing up the display and also looks a bit confusing.

    To fix opera just add a float:left.

    Code:
    #test2 div 
    {
        width: 819px; 
    	height: 200px;
    	overflow: auto;
    	border-left: 1px solid #ccc;
    	border-bottom: 0px solid #ccc;
        float:left
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. The float did the trick.


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
  •