Page 1 of 1

Table not scrolling

Posted: Wed Jan 11, 2012 8:55 pm
by nielsenN
I'm trying to make a table from a searched data scroll but it is not working.

This is the css code I use to do the table scroll

Code: Select all

<style type="text/css">
table{
background-color:#EBEBEB;
}
th{
	width:150px;
	text-align:left;
	}
	</style>
    </head>
        
   	<style type="text/css">
	table {
 	  table-layout:fixed;
  		 width:100%;
  		 border:0px solid ; /*border merah d luar*/
		 
  			 word-wrap:break-word;
			overflow:scroll;
   			}
			p	{font-size:9px}

		 tbody { height:20em;  overflow:scroll; width:auto}
	 td { height:auto; }
	 
	</style>
This is the code for the table that I wanted to scroll.

Code: Select all

<table width='100%' background="pictures/bg.jpg" id='header' color='black'>
       
      <thead>
        <tr>
        <td width="40%" scope="col"><div align="center"><span class="style2 style1">       </span></div></td> 
         <td width="40%" scope="col"><div align="center"><span class="style2 style1">Kod Sekolah</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Nama Sekolah</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">PTJ</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Server</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">PC</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">NB</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Mono Laser</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Color Laser</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Dot Matrix</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">LCD</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Set LAN</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Jumlah Kos</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Dibayar</span></div></td> 
          <td width="50%" scope="col"><div align="center"><span class="style2 style1">Tanggungan</span></div></td> 
        </tr>
      </thead>
    </table>
<?php 
	if(($_REQUEST['action']=="search")or
	($_REQUEST['criteria']!="")){?>
     
        
      <?php 
	  do { 
	  if($_REQUEST[category]=="negeri"){ $searching=$row_school['negeri'];
	  }else if($_REQUEST[category]=="daerah"){ $searching=$row_school['daerah'];
	  }else if($_REQUEST[category]=="kod_sekolah"){ $searching=$row_school['kod_sekolah'];}
	  
	  if($searching==$_REQUEST[criteria]){
	  	  
	  ?>
      
      
      <table width='100%' border="1" id='header' color='black'>
       <thead>
      <tr>
     
        <td align="left" valign="top" width="7%"><form action="" method="post" name="xsearch" id="xsearch">
          <input name="action" type="hidden" id="action" value="edit">
			<input type="submit" name="edit" id="edit" value="EDIT">
          <input name="id" type="hidden" id="id" value="<?php echo $row_school['id']; ?>">
          <input name="category" type="hidden" id="category" value="<?php echo $_REQUEST['category'];?>">
        </form>
        </td>
        
        
        <td align="left" valign="top"><?php echo $row_school['kod_sekolah']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['nama_sekolah']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['ptj']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['server']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['pc']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['nb']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['mono_laser']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['color_laser']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['dot_matrix']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['lcd']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['set_lan']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['jumlah_kos']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['dibayar']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['tanggungan']; ?></td>
        
       
       
      </tr>
       
      </table>
      </thead>

I hope if anyone can pint point my mistake in the css tags or the location of the tags.:(

Re: Table not scrolling

Posted: Thu Jan 12, 2012 11:17 am
by pickle
"it is not working" is not very descriptive. Please explain better what is expected behaviour and what is actually happening.

Re: Table not scrolling

Posted: Thu Jan 12, 2012 1:00 pm
by mikosiko
AFAIK you can't add scroll bars to a table... you can add it to Pages or some elements thou... one way to do what you want is wrapping your table in a <div> and style it as scrollable (check for cross-browser compatibility)

example:

Code: Select all

<style>
div.scroll{
  width:100%; 
  height:300px; 
  overflow:scroll; 
  border:1px dashed black; 
  background-color: #ccc;
}
</style>

    ....
   ....
   <div class="scroll">
     <table> 
        <rest of your table here>
     </table>
   </div>
and of course you can also use javascript to do the same