Table not scrolling

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
nielsenN
Forum Newbie
Posts: 17
Joined: Wed Nov 16, 2011 6:46 pm

Table not scrolling

Post 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.:(
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Table not scrolling

Post by pickle »

"it is not working" is not very descriptive. Please explain better what is expected behaviour and what is actually happening.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
mikosiko
Forum Regular
Posts: 757
Joined: Wed Jan 13, 2010 7:22 pm

Re: Table not scrolling

Post 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
Post Reply