<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Scrollable fixed size table cell with CSS

Published on
14,653 Points
11,653 Views
Last Modified:
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>

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>

Open in new window

0
Comment
Author:quincydude
1 Comment
LVL 7

Expert Comment

by:robertark
I hope this is not a class that is teaching students to develop websites using tables.

Tables are for tabular data, not layouts. You should write this on your paper/assignment (as this looks like homework).
0

Featured Post

OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Join & Write a Comment

In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month