On some sites when you see a scrollbar inside a table cell maybe you think they have an inline frame inside the cell, well this can be achieved by using a div using the CSS overflow attribute. The only downside to using this is that you can't change the content inside the cell without changing your code unlike inline frames where you can change the page. Nevertheless this is still a good code to use on certain parts of your site.
To see an example of this code click here.
Description of the code
To make this code possible you need to add the overflow attribute to the tables td tags.
<td style="width: 400px; height: 300px;">
<div style="width: 100%; height: 100%; overflow: auto;"> |
You see by adding the div style width and height to 100% the div fills the entire section of the table cell and by making the overflow attribute have the value auto it make scrollbars appear if they are needed. After you have entered all of your content into the cell you must remember to close the div tag. </div>.
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="width:400px; height:100px;"> </td>
</tr>
<tr>
<td style="width:400px; height:300px;">
<div style="width:100%; height:100%; overflow:auto;"> |
This is the start of the table code and you can see there are no other tags or attributes and the scrollbar only appears because of the div, there is no CSS in the head of the page because the styles are applied into the page code. After you have this code just insert all your content (bear in mind you can change the width and height of the cell) and remember to close all of the open tags, simple isn't it?