Back to posts

CSS for fall-back tables

Factmint Charts are based upon progressively enhancing HTML tables. So, if your users are running a really old browser, or have JavaScript disabled, at least they get the original table. That’s loads better than other JavaScript based data visualizations where you get nothing at all!

Here’s a comparison between IE9 and IE6:

On the left, the Column Chart has rendered in full on Internet Explorer 9. IE6, on the right, cannot display the visualizations but at least it show the user the underlying data.
On the left, the Column Chart has rendered in full on Internet Explorer 9. IE6, on the right, cannot display the visualizations but at least it show the user the underlying data.

So, the data displays on both but it looks pretty ugly on IE6. Well, CSS is much better supported than SVG, so in the spirit of Progressive Enhancement you can provide an external stylesheet to improve the look of the table. We also provide one as part of our service, if you want to use it:


As well as being a Progressive Enhancement, CSS intrinsically degrades gracefully so it looks okay on IE6 and better on Firefox 30:

On the left, IE 6 renders a fairly basic table compared with Firefox 30, on the right, which features nth-child selectors and cell padding.
On the left, IE 6 renders a fairly basic table compared with Firefox 30, on the right, which features nth-child selectors and cell padding.

So, simply adding an appropriate table style gives you readable content on all browsers, which looks good on fairly old browsers and ace for at least 67% of users who have fairly modern browsers.