How to Display Tabular Data - A New Perspective | WebReference

How to Display Tabular Data - A New Perspective

current pageTo page 2To page 3

How to Display Tabular Data - A New Perspective

By Nicolas Erlijman


It's common for a Web developer to build a site or Web application where tabular data is used. Consider a Web page, where client information has to be shown. There will be many fields such as name, last name, age, salary, etc. depending on the business needs. What happens if you have to show a very long field like user comments or full address? Those fields might not fit correctly in a table cell, making your browser resize the table cells in an attempt to make the content fit. That produces an annoying scrolling and/or cell height/width stretching. This article will show you how to display tabular data in a non-conventional manner, preventing table cells from expanding in spite of the length of the text contained inside it, with a nice scroll to show the full text and yes, cross-browser compatible!

You've probably seen many sites or applications where, in the footer, it states "This site is best viewed with Internet Explorer at 1024x768" or something like that. Both trends (browser and resolution specifics) aren't recommended since there are many browser types and screen resolutions being used on the Internet (and also in your Intranet).

Fixed tables (using width in pixels) might be fine in some cases, but for displaying tabular data it's better to have table columns defined with percentage (%) values, so the table will fit its container maintaining the column aspect ratio.

But this is too theoretical, let's try to solve the problem!

Consider the following scenario:

"In my site, I want to display tabular data of my client details. There are 3 columns: name (25%), age (25%) and user comments (50%), but the comments field is too long to fit in the table column. Table cells shouldn't grow, I also don't want those annoying scrolls to appear in my page and it should be viewed correctly in any browser!"

Problem 1: Cells Grow in Height

Using percentage values in table, the contained text in a cell will fit correctly, but as the text becomes larger the browser will auto adjust the cells height causing the annoying behavior that our client doesn't want:

Problem 2: Ugly Scrolling Appears

Another problem is that if the text contained in the cell doesn't have spaces between words, the browser doesn't know how to split its contents causing the ugly scrolling effect:

If we use the CSS property white-space:nowrap, we avoid table cells becoming taller, but as the text will be contained in only one line, the same scrolling effect detailed above remains.

Problem 3: Using Fixed Table Values Won't Solve the Problem

As mentioned before, using fixed table values in pixels is a bad practice, and also won't solve our problem, as the two previous issues will be there anyway.

Input Text Controls

By using input text controls to show data, we can guarantee cells won't become taller. To simulate a nice display, the input should be read-only, have a transparent style background and not have a border as follows: