Scroll bar in a cell of a table using CSS

Scrolling a cell in a Table using CSS:

Have you ever faced a problem, that you wanted to have a scrollable cell inside a table, or the problem that you made the template in Adobe Photoshop, and had kept a fixed area in cell and let the user scroll in that particular cell. So what is the solution to this? Well Thanks to CSS, it gives us enough power to control this option. So here is a very simple solution to that problem.

Looking at the html code for a table,

<table width=”505″ height=”235″ border=”0″>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan=”2″> Scroll bar will come in this cell </td>

</tr>

</table

So now we have to give the Cell of the table that is going to be scrollable an ID. I won’t be going into the explanation of an id now. We need to define a div tag (i.e. <div>) in the cell so the code of the table becomes

<table width=”505″ height=”235″ border=”0″>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan=”2“><div id=”scroller”>Scroll bar will come in this cell </div></td>

</tr>

</table>

The code highlighted in red is the code added. Remember we will be using this id for the scroll bar.

Now moving to the CSS code, I am assuming here that you have sufficient knowledge about CSS, that you can create and import or link a CSS file to an HTML file.

Now I will just be writing the CSS code

#scroller { width: 400px;

height: 400px

overflow: auto;

}

We can add other styling if we want but since this is our prime requirement we don’t have to. Now explanation of the code, I am identifying that the id scroller must have these rules to it. Now since an id cannot have two copies in a single HTML file you do not need to worry about having the problem in your HTML file. In case you want multiple cells to have the same rules applies. Try using class instead of id. Now in the style sheet we have width, this is a property that will define what the FIXED width will be. Now the height defines the height, and finally comes the overflow property. This defines what the browser WILL do when extra content is added to the cell. It makes a scroll bar.

So there you have it, a scroll bar in a cell. A problem solved, and it works with Internet Explorer 6 and Firefox 3.

Have a good day.