Scrollable fixed size table cell with CSS

Table is a very common element used in web design. It can bring neat and tidy designs to web pages. As dynamic web pages(php, jsp, etc) are now very popular for web building, a lot of web designs involves filling up dynamic content into table cells designed in a template. However, since the contents are dynamic, we cannot expect how many data would be fitted into a cell. And if the table cell cannot fit all contents, browsers would simply change the size of the cell to display all contents by default. This is always a nightmare for web designers as all these could ruin the whole designed layout and resulting in a non-professional layout.

So, learning how to set the table cell size is a very important part for every web designer. This tutorial will tell you how to fix it. But what would happen if the content is really too much? Don't worry, the tutorial will also tell you how to make a scrollable cell to ensure all the content in the cell are accessible.


It's always easier to learn with a working example. To make it work, you have to use CSS to help you. Take the following as an example

 

<style>
                      	tr.entry{font-family: Verdana;font-size: xx-small;text-align:left; }
                      	div.scrollablecell {overflow:auto;border:0px;word-wrap: break-word;width:100%;height:110px} 
                      </style>

Select all Open in new window

You just need to focus on the styles of      div.scrollablecell. Yes, it's a div, you will have each cell a div and your cell content will be stored in each of them. Within all the styles in the class scrollablecell, here's some simple description

overflow:auto - Shows scroll bar automatically if all content cannot be displayed.

word-wrap: break-word - Break a line to the next row if it's too long. If you also want to have a horizontal scroll bar, exclude this in the style.
***This is the CSS Level 3 standard and by the time only IE support it. If you are using Firefox, try to install Toggle Word Wrap add-on(https://addons.mozilla.org/en-US/firefox/addon/2351) for the best result***

width, height - The size of the div. These must be set or the whole thing would not work. Better set them in unit of px(pixel) if you have not defined them in the cell.

These setting can bring you the result: if the content of the div cannot be shown within the block with height of 110px, then a scrollbar will appear and contents can be accessed by scrolling it.

So you got the styles and here's the corresponding html code of the table.
 

<table style="width: 200px;border:solid 1px #6699CC;table-layout:fixed;" cellspacing="0" cellpadding="0">
                      	<tr style="background: #6699CC;height: 17%;width: 100%;">
                      		<th style="text-align:center;">
                      			<b><font size="2" face="Verdana" color="white">Content</font></b>
                      		</th>
                      	</tr> 
                      	<tr class="entry" valign="top">
                      		<td >
                      			<div class="scrollablecell"> 
                      				your content here
                      			</div>
                      		</td>
                      	</tr>
                      </table>

Select all Open in new window