CODEWITHSUNDEEP
csshtml
Muiter
Muiter

Reputation: 1520

Text is shown outside the div

I'm trying to put some content in an an div. For some reason the content it shown below the div instead of inside the div.

.scrollme
{
    height: 200px;
    width: 300px;
    overflow: auto;
    border: 1px solid #666;
    background-color: #ccc;
    padding: 8px;
}

echo '<table width="100%">
      <tr>
          <td colspan="2" class="pulldown_top_table">'.$lang['logboek'].' <a href="#?w=700" rel="popup_add_log" class="poplight" title="'.$lang['form_add'].'"><img align="center" src="images/icon/new_sm.png" onClick=\'document.getElementById("ifr_7").src="dossier_add_log.php?id='.$q.'";\' /></a></td>
      </tr>   
      <div class="scrollme">';

      while($row = mysql_fetch_array($res))
      {
            // maak style
            if($row['soort'] == 'systeem' || $row['soort'] == 'folder')
            {
                $style = 'style="line-height: 10px; color: grey;"';
            }
            else
            {
                $style = 'style="line-height: 10px; color: black;"';
            }

          echo '<tr '.$style.' title="'.$row['naam'].' '.$row['updated_title'].'">
                    <td valign="top"width="35"><font size="1">'.$row['updated'].'</font></td>
                    <td><font size="1">'.nl2br($row['omschrijving']).'</font></td>';
                echo '</tr>';
      }
echo '</div>
      </table>';

enter image description here

parts of the generated html starts with:

<table width="100%">

      <tr>

          <td colspan="2" class="pulldown_top_table"> <a href="#?w=700" rel="popup_add_log" class="poplight" title=""><img align="center" src="images/icon/new_sm.png" onClick='document.getElementById("ifr_7").src="dossier_add_log.php?id=256";' /></a></td>

      </tr>   

      <div class="scrollme"><tr style="line-height: 10px; color: grey;" title="Mark Ruiter 30-06-2011 13:11">

                    <td valign="top"width="35"><font size="1">30-06</font></td>

                    <td><font size="1">Producten van product gekopieerd naar map subfolder 2</font></td></tr><tr style="line-height: 10px; color: grey;" title="Mark Ruiter 30-06-2011 12:41">

And ends with: 

<td><font size="1">Dossier aangemaakt met:<br /> 
    Klantreferente: 2119<br /> 
    Bewerkingen: nvt<br /> 
    Materiaal: S235<br /> 
    Dikte: 1<br /> 
    Attest: geen</font></td></tr></div>

      </table>

Please help.

Upvotes: 2

Views: 251

Answers (3)

spuas
spuas

Reputation: 1693

You cannot insert a DIV like that inside a table:

a table has tr (rows) and td(columns) so if you want to insert a DIV you have to place it inside the element

<table><tr><td><div /></td></tr></table>

OR

place the full table inside the DIV:

<div><table>...</table></div>

Upvotes: 3

GordonM
GordonM

Reputation: 31730

Divs are not valid inside tables except inside cells (td and th). If you need to split a table up into subsections, you can use thead, tfoot and tbody instead. The thead and tfoot elements define the header and footer of your table respectively, and tbody defines a content block. You can have 1 thead, 1 tfoot and any number of tbody elements you want in a table.

I'm not sure if you can have a scrolling tbody, though. At least not one that works in all browsers

Upvotes: 0

Alex Reitbort
Alex Reitbort

Reputation: 13696

You can not put part of the table rows into div.

You will need to split you table to two parts. One table for header, and one table inside scrollable div with data.

Upvotes: 2

Related Questions