SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: DIV in a TABLE

  1. #1
    SitePoint Zealot barleytwist's Avatar
    Join Date
    Dec 2005
    Location
    Lulworth, Dorset, UK
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV in a TABLE

    I have this code being generated:
    <h3>{ts}Summary of Case Involvement{/ts}</h3>
    <table class="report">
    <tr class="columnheader">
    <th>&nbsp;</th>
    {foreach from=$casesSummary.headers item=header}
    <th scope="col" class="right" style="padding-right: 10px;"><a href="{$header.url}">{$header.status}</a></th>
    {/foreach}
    </tr>
    {foreach from=$casesSummary.rows item=row key=caseType}
    <tr>
    <th><strong>{$caseType}</strong></th>
    {foreach from=$casesSummary.headers item=header}
    {assign var="caseStatus" value=$header.status}
    <td class="label">
    {if $row.$caseStatus}
    <a href="{$row.$caseStatus.url}">{$row.$caseStatus.count}</a>
    {else}
    0
    {/if}
    </td>
    {/foreach}
    </tr>
    {/foreach}
    </table>
    I am trying to put a DIV in as shown below to give me a fixed height and scroll bar on all the rows below the header row. The trouble is the HTML puts the DIV ABOVE (outside) the table:
    <table class="report">
    <tr class="columnheader">
    <th>&nbsp;</th>
    {foreach from=$casesSummary.headers item=header}
    <th scope="col" class="right" style="padding-right: 10px;"><a href="{$header.url}">{$header.status}</a></th>
    {/foreach}
    </tr>
    <div style="height:150px;overflow:auto;>
    {foreach from=$casesSummary.rows item=row key=caseType}
    <tr>
    <th><strong>{$caseType}</strong></th>
    {foreach from=$casesSummary.headers item=header}
    {assign var="caseStatus" value=$header.status}
    <td class="label">
    {if $row.$caseStatus}
    <a href="{$row.$caseStatus.url}">{$row.$caseStatus.count}</a>
    {else}
    0
    {/if}
    </td>
    {/foreach}
    </tr>
    {/foreach}
    </div>
    </table>
    I can get this to work if I encompass the whole table in the div but that scrolls the header row. Advice appreciated.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the DIV around the table, or nest the tables that will contain the DIV. If you're going to put the DIV around the table, collapse the margins and paddings by setting them to zero.

    (As it stands now, your code does not validate as HTML.)

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The div needs to sit inside a cell. The way it's written above, it's sitting between a closed row and an opening row.. which won't work.

    <td>
    <div style="height:150px;overflow:auto;>

    </div>
    </td>

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    The best way to achieve that is to put

    <thead>...</thead> around the header row, and <tbody>...</tbody> around the section that you want to scroll.

    You can then define
    tbody {height:150px; overflow:scroll;}

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only Firefox supports the scrolling tbody. See http://www.sitepoint.com/forums/showthread.php?t=615364 for the x-browser solution.

    BTW, it's better to show server output, rather than the scripting (Smarty template?). Simple way is to open the page in your browser, and view source. Copy paste that to your post.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


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
  •