Scroll bars on tables

Discussion in 'HTML & Website Design' started by red_fiesta, Nov 23, 2006.

0
  1. #1
    does anyone have any good tutorials on this?
     
    red_fiesta, Nov 23, 2006 IP
  2. thedark

    thedark Well-Known Member

    Messages:
    1,346
    Likes Received:
    43
    Best Answers:
    0
    Trophy Points:
    168
    Digital Goods:
    1
    #2
    the scroolbars will appear if you use frames, or <textarea>
     
    thedark, Nov 23, 2006 IP
  3. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Not true, you can get scrollbars to appear on lots of elements, including tables/divs. All it takes is a tiny bit of CSS, namely "overflow: auto;" and a set width/height.
     
    crazybjörn, Nov 23, 2006 IP
  4. red_fiesta

    red_fiesta Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    can anyone help

    this is close but doesnt quite work...

    

<style type="text/css">


.innera {
overflow:auto;
width:700px;
height:90px;
}

.outer thead tr {
position:absolute;
top:2px;
height:15px;
width:700px;
left:7px;
}






body {
	font-family: arial, helvetica, sans-serif;
	color: #5a5c5d;
	background-color: white;
}

.TestTread
{
	margin:0px;
	padding:0px 0px 5px 0px;
	border:solid #D5D1C7;
	border-width:0px 0px 2px 0px;
	background-color:#FFFFFF;
	font-weight:bold;
	font-size:0.9em;
	
	
}


.mainDetails
{
	border:solid #D5D1C7;
	border-width:0px 0px 1px 0px;
	background-color:#F8F7F6;
}

.mainDetails a:link {color: #004eb9;}
.mainDetails a:visited {color: #004eb9;}
.mainDetails a:active { color:#004eb9}

.mainDetails a {text-decoration: none;}


td.mainDetails
{
	margin:0px;
	padding:7px 0px 5px 0px;
	border:solid #D5D1C7;
	border-width:0px 0px 1px 0px;
	font-size:0.9em;
}
</style>



</head>

<body>


<h2>&nbsp;</h2>
<div class="outer">
<div class="innera">
    <table summary="This table lists flights arriving at Bristol International Airport.">
      
      <thead  class="mainDetails">
        <tr>
          <th  class="TestTread" style="width:150px; text-align:left; padding-right:5px;">Thumbnail</th> 
          <th  class="TestTread" style="width:150px; text-align:left; padding-right:5px;">Name</th> 
          <th  class="TestTread" style="width:150px; text-align:left; padding-right:5px;">Dimensins</th> 
          <th  class="TestTread" style="width:150px; text-align:left; padding-right:5px;">Delete</th> 
        
        </tr>
  	
      </thead>

     

      <tbody>

    

     
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; padding-right:5px;">20:58</td>

        
      </tr>
	  
	  
     </tbody>
</table>


</div>
</div>

</body>
</html>
    Code (markup):
     
    red_fiesta, Nov 23, 2006 IP
  5. red_fiesta

    red_fiesta Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    tried this also

    <style type='text/css'>


.innera {
position:absolute;
overflow:auto;
width:500px;
height:90px;
}


body {
	font-family: arial, helvetica, sans-serif;
	color: #5a5c5d;
	background-color: white;
}

.mainThread
{
	margin:0px;
	padding:0px 0px 5px 0px;
	border:solid #D5D1C7;
	border-width:0px 0px 2px 0px;
	background-color:#FFFFFF;
	font-weight:bold;
	font-size:0.9em;
	
	
}


.Details
{
	border:solid #D5D1C7;
	border-width:0px 0px 1px 0px;
	background-color:#F8F7F6;
}

.Details a:link {color: #004eb9;}
.Details a:visited {color: #004eb9;}
.Details a:active { color:#004eb9}

.Details a {text-decoration: none;}


td.Details
{
	margin:0px;
	padding:7px 0px 5px 0px;
	border:solid #D5D1C7;
	border-width:0px 0px 1px 0px;
	font-size:0.9em;
}
</style>
<div style="width:800px;">

<div style="width:300px; float:left">
 <img src="main.jpg">
</div>

<div style="width:500px; float:right; text-align:left">
<table width="500" border="0" cellspacing="0" cellpadding="0" class="Details" summary="Test" style="margin-top:20px;">

				
				<thead class="Details">
				<tr>

				
					<td class="mainThread" style="width:150px; text-align:left">Thumbnail</td>
					<td class="mainThread" style="width:150px; text-align:left">Name</td>
					<td class="mainThread" style="width:150px; text-align:left">Dimensins</td>
					<td class="mainThread" style="width:150px; text-align:left">Delete</td>
				  </tr>
				</thead>


	
			<div class="innera">	
				<tr>
				<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
				</tr>
				<tr>
				<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
				</tr>
				<tr>
				<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
				</tr>
				<tr>
				<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
				</tr>
				<tr>
				<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
					<td class="Details" style="width:150px; text-align:left; padding-right:5px;">oo</td>
				</tr>
			</div>
					
	</table>

  
  
</div>



</div>
    Code (markup):
    but doesnt scroll...

    anyone?
     
    red_fiesta, Nov 23, 2006 IP
  6. weknowtheworld

    weknowtheworld Guest

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Can tables also be given scroll bars....

    Come on people... can someone guide me... Awaiting response...
     
    weknowtheworld, Nov 23, 2006 IP
  7. red_fiesta

    red_fiesta Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    ok i have andmade the example have more code like mine..

    but one error...

    the titles at the top now show perfect in ie and not in ffox...



    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<style type="text/css">


.innera {
overflow:auto;
width:600px;
height:90px;

margin-top:20px!important;
margin-top:10px;

}

.outer thead tr {
position:absolute;
top:1px;



}

body {
	font-family: arial, helvetica, sans-serif;
	color: #ffffff;
	background-color: white;
}

.TestTread
{
	margin:0px;
	padding:0px 0px 5px 0px;
	border:solid #D5D1C7;
	border-width:0px 0px 2px 0px;
	background-color:#000000;
	font-weight:bold;
	font-size:0.9em;
	
	
}


.mainDetails
{
	border:solid #D5D1C7;
	border-width:0px 0px 1px 0px;
	background-color:#000000;
}

td.mainDetails
{
	margin:0px;
	padding:7px 0px 5px 0px;
	border:solid #D5D1C7;
	border-width:0px 0px 1px 0px;
	font-size:0.9em;
}
</style>



</head>

<body>


<div class="outer">
<div class="innera">
    <table summary="This table lists flights arriving at Bristol International Airport." border="0" cellspacing="0" cellpadding="0" class="customerDetails">
      
      <thead  class="mainDetails">
        <tr>
          <th  class="TestTread" style="width:150px; text-align:left;">Thumbnail</th> 
          <th  class="TestTread" style="width:150px; text-align:left;">Name</th> 
          <th  class="TestTread" style="width:150px; text-align:left;">Dimensins</th> 
          <th  class="TestTread" style="width:150px; text-align:left;">Delete</th> 
        
        </tr>
  	
      </thead>

     

      <tbody>

    

     
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	  <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	   <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	   <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	   <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	   <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	   <tr>
        <td class="mainDetails" style="width:150px; text-align:left; ">EZY 450</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">BELFAST INTL</td>
        <td class="mainDetails" style="width:150px; text-align:left;">21:00</td>
        <td class="mainDetails" style="width:150px; text-align:left; ">20:58</td>

        
      </tr>
	  
	  
	  
     </tbody>
</table>


</div>
</div>

</body>
</html>
    Code (markup):
     
    red_fiesta, Nov 23, 2006 IP
  8. master06

    master06 Peon

    Messages:
    2,806
    Likes Received:
    121
    Best Answers:
    0
    Trophy Points:
    0
    #8
    you can use textare or frames. But fremase best way for this if you can use textare you must disable input with readonly ="readonly" tag.

    Regards,
    Mustafa
     
    master06, Nov 23, 2006 IP
  9. red_fiesta

    red_fiesta Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    what i dont get that?
     
    red_fiesta, Nov 23, 2006 IP