Jamie Balfour BSc

Welcome to my personal website!

Technology enthusiast

I am very interested in technology, particularly relating to computer science. I am most interested in web design and development.

My main hobby is programming. One of my most well known products from this is ZPE. I also am the sole creator of BalfBlog, BalfBar and BalfSlider.

A little bit about me

In 1997, when I was six years of age, I got my very first computer. I was always very interested in the ins and outs of it and dismantled it to see how it worked.

Years later, in 2016 I received my BSc (with honours) in Computer Science, obtaining a First class degree.

I'd like to welcome you to my website and hope you enjoy using it as much as I have enjoyed building it!

Google Plus
Jamie Balfour BSc
Full stack developer

Solving the problem with responsive data tables

08 Aug 2016 at 11:36
We all know that responsive designs are the way to go. For a long time now my website has been fully responsive, but one of the features I used that was developed by someone else was the responsive table. I never felt it fitted in properly and felt it needed improved. In this post I talk about an alternative to this and how we can easily develop a responsive table.

We all know that responsive designs are the way to go. For a long time now my website has been fully responsive, but one of the features I used that was developed by someone else was the responsive table. For as long as I have had it in use on my website I have disliked it.

I dislike it because it shifts the first column of the table to the left, essentially floating it above the rest of the table, whilst letting the user scroll the rest of the table. It created an ugly, ugly mess of things being thrown all over the place. Alas, finding the best solution for a responsive table could be much easier.

What about using an overflow:auto and display:block on it? Good idea, but the problem is that now the tables will not stretch the full width of the container.

The solution I am now using is a combination of JavaScript and CSS. The solution involves using jQuery's wrap function like so: jQuery("table.responsive").wrap("<div style="overflow: auto;"></div>");which will wrap each table with the class responsive in a scrollable div (see, very little CSS and JavaScript). Also, by giving the table inside a minimum width of 100%, they will always stretch the width of their container (which is the wrapper div), ensuring that they are always 100% of the content.

The problem though is with the interaction design side of things - how are users supposed to know when they can scroll some table in the middle of the content?

After reading a few articles, I found a comment in one of the websites with a link to this page. This allows you to make scrollbars always visible - something that should not need to be hacked together but should be a CSS feature, but Apple and Google don't agree with this so we do need to hack it together.

Although this does not guarantee that users will notice the scrollbars, it does leave some possibility that they might notice them.

Tables are a difficult thing to work with and making them responsive is one of the most difficult things to do in terms of usability. Let me know if you have any solutions to these problems.

Here is an example table, resize your browser or use a smartphone to test it.

Name Platform Year Sales Revenue
Warcraft: Orcs and Humans MS-DOS and Mac OS 1994 1,100,000 $45,000,000
Warcraft II: Tides of Darkness MS-DOS, Windows, Macintosh, Saturn, PlayStation 1996 1,000,000 $50,000,000
Warcraft III: Reign of Chaos Windows and Mac OS 2002 3,000,000 $175,000,000
Warcraft III: The Frozen Throne Windows and Mac OS 2004 5,000,000 $95,000,000

Site accessibility

A lot of the original functionalities that once existed here have been removed.

This page was generated in 0.28 seconds using 2097152 bytes. Slow? Let me know.

To use project mode, the window must be greater than 920 pixels in width.
Click here to disable Project Mode.
This site uses cookies to deliver its services, to personalise ads, to store preferences and to analyse traffic. Information about your use of this site is shared with other companies. By using this site, you agree to its use of cookies.
Contact me
Contact Jamie Balfour

Get in touch with me via this form.