1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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