Crunching Tables, Hidden Data

Should I give up, or should I just keep crunching tables, even if it leads nowhere?

Ah tables… a fascinating piece of Internet history. Originally conceived for the purposes of displaying data, once upon a time, tables, due to their stability, were even the dominant design structure of the Internet. But now with so many other options for both design and displaying data in the HTML DOM, tables are a relic of the past, right?

A lot of times, it seems like this is true. However, there are still situations you run into where you’ll come across tables in legacy systems that still use them as a holdover from past older versions of the product, or even more modern data-display centric systems. One example of this is actually a pretty popular large-scale solution among a diversity of organizations. I won’t name any names, but it rhymes with “Icrosoft Airpoint”

Tables have issues with the fact that the web has been going more mobile since the latter half of the 2000’s and thus, display and viewing areas have been getting smaller. The difficulty with this is that tables are, by their nature, not a particularly fluid data structures. They can be flexible to an extent, but at some point they just decide to say “no más” and they’ll overflow their container content areas… which usually equals some fun side-scrolling.

So here we’ll enter into a discussion of some issues with tables and what can be done to solve them. It seems like the natural approach that a lot of developers will take toward tables to set the width to 100% in the CSS.

table{
width:100%;
}

This is fine up to a certain point as shown in the first example here.

However as the number of columns grow or the data within them start to contain more data that’s not really “breakable” e.g. long words or even hyperlinks eventually tables just overflow their containers as shown in the next example.

Setting width:100%; in your CSS does nothing. Even setting a fixed width such as width:500px; doesn’t do much good either.

What can be done? Well there are a number of solutions perhaps not all of them ideal, but if you’re stuck using tables and you don’t have much choice in turning to something else, what follows can be helpful, at least a little bit.

Solution #1: Crunch it in There
Surprisingly, there is a way to actually ensure that your table does fit the content area. This can be accomplished by setting the table-layout property to “fixed”.

table{
table-layout: fixed;
}

There is a downside to this: all the columns now have the same width. Although this looks okay, it can actually be improved upon a bit further by adding the word-wrap: break-word, property.

table{
table-layout: fixed;
word-wrap: break-word;
}

You could even go a bit further and hide overflowing content in your table header cells and table data cells.

table tr th, table tr td {
overflow:hidden;
}

This, like other solutions with tables does not seem ideal. However, if there is a need to crunch your entire table into a small section, this can be a compromising way to do it.

Solution #2: Side-Scroll
By adding overflow-x: scroll to your container div that your table lives within you can get a little bit of side-scrolling action on.

.container {
overflow-x:scroll
}

Solution #3: Show Less Content
The other option would be to show less content. This can be done by either setting class names on the columns and cells and then hiding the ones you don’t want to show at smaller resolutions (such as those found on mobile devices) by making use of CSS3 media queries.

Solution #4: JavaScript
Another option would be to use a JavaScript/jQuery plugin of some sort to either rearrange your table data or show a limited amount in certain circumstances.

All in all you do have a number of choices you can pick from in dealing with tables, especially when you have to make design decisions pertaining to mobile devices. What the best option is for your particular solution will probably depend on a number of things, but hopefully some of the ones discussed above will give you a good starting point to jump off from.