Improve display of date range inside a table

Question

I have been taking a look at this post, but it is not exactly what I am looking for, plus I have hour and minutes and is inside a table.

My current table is this one (bigger image):

The problem I have with my table is that these two date columns are the largest on the table and also is not a very fast way to see the ranges of time.

My aim is trying to make this columns smaller if possible or at least, with a better look when the table is resize, and also, make them more simple to read.

Right now, this is how they look when the table is resized:

The datetime columns are critical for the user and should be displayed all the time.

Any help, recommendations or ideas will be appreciated :)

Answer 1

Here are couple of options I have come up with...

Option 1:

---

02/04
07:00-08:00

Option 2:

---

02/04/2012
07:00-08:00

Option 3:

---

02-Apr-13
07:00-08:00

You can also have different color (May be Light Gray) for Date and different color for time (Black may be)

Answer 2

First of all, decouple the day and time components. Use separate lines for them since you are already using multiple lines in a row.

A couple layouts you can try out:

• Top row -- Here you can try to align the dates to left and right, to give a continuity feel. The difference between the left and right ones is, in the left one the time is also aligned whereas in the right the time is center aligned.

• Bottom row -- You can remove the day if it is the same day and make it easier for the user to process the information. You can also grey out the date rather than removing it (right image), but, I feel it might be a distraction since the user is forced to double check(?) what it is in there.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

The underlying problem is the table is massive, I would take a look at responsive data tables. In addition to adding a line break after the date, I would look at dropping less important columns on resize as in the FooTable example.