4

I have a table where a lot data is repeated (see the competition, players and date columns).

table with repeating columns

The endless rows of the same stuff draws the eye and makes it seem like the most important thing in the table and distracts from the interesting (varying) stuff.

Is the a good way to display the same information over over like this? It does vary further down the table.

Improve this question

2 Answers 2

Reset to default
2

If they are often grouped, then using some indication that this is all the same and only printing the label on the first one could work, would take some handy coding though. The other option that came to mind was to simply make any repeated line have less contrast (possibly return to full contrast on hover?).

Something Like These Example of treating repeated info in Table

Improve this answer
1
  • Good ideas, thanks. A pale background color will really make it obvious what is going on there.
    – Thomas David Baker
    Commented Oct 31, 2016 at 10:16
1

Luke's suggestion is good. Another option, if space and the data allows, is to have 'Penny Dreadful Thursdays 1.01' vertical. But that would break quickly if there aren't enough entries. Looking at the chart too it may not be necessary to have a Top 8 - simply have a dividing line between the two. Of course, if the data is able to be sorted by any other column all our ideas break ;)

Improve this answer
4
  • 1
    Interesting idea. The table is sortable by all of its columns but I am considering writing the all-singing all-dancing javascript solution to make sure it always looks right post-sort. If I can work out what "looks right" is :)
    – Thomas David Baker
    Commented Oct 31, 2016 at 10:16
  • 2
    Wow. That's going to be the Cirque du Soleil of JavaScript 😳🙃 Good luck!
    – Daniel
    Commented Oct 31, 2016 at 10:20
  • I ended up with this that adds the class 'repeat' to any cell that has the same text as the cell above: var current, previous; $(this).find('td').find('*').addBack().removeClass('repeat'); $(this).find('tr').each(function() { current = $(this).find('td').toArray(); if (previous) { for (i = 0; i < current.length; i++) { if ($(current[i]).text() == $(previous[i]).text()) { $(current[i]).find('*').addBack().addClass('repeat'); } } } previous = current; })
    – Thomas David Baker
    Commented Nov 6, 2016 at 7:15
  • This ended up taking up to 2 seconds on really big tables (10,000 rows) so I just removed it from the site. Sad, but I want the 2 seconds back :)
    – Thomas David Baker
    Commented Nov 27, 2017 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.