The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design responsive question

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #248802

    Is there a script for a responsive 5 generation pedigree table without the user being confused about who belongs to who?


    I suppose that would very much depend on the susceptibility to confusion of the target audience…

    Lots of free stuff around though

    I don’t think a script would really be needed.


    Have been trying for weeks all over the net to get something to make it work responsively to no avail. See what I mean here. Just hope I can find a solution as I have the whole wbsite responsive except for the pedigrees.


    I don’t know anything about pedigrees but it still makes sense to me. Is the issue then that on smaller screens the window starts to overflow? Because up to a certain point (determined by the shortest words in the table), it’s definitely responsive.

    Below that screen size, you could go for this as a first step:

    .Pedigree td {
      max-width: 0;
      text-overflow: ellipsis;
      overflow: hidden;

    If you leave out the .Pedigree you’ll see it’s fully responsive, but especially at the top not readable anymore. I would take another approach for the information there though, make it go below each other instead of getting increasingly smaller.

    But maybe you could try the above first, unless another member has a better idea of course. The next step could be to deal with the readability and the header content.


    Another really easy fix would be to wrap the table in a div and apply this CSS to the div wrapper; overflow: auto; -webkit-overflow-scrolling: touch;

    The above is a simplified approach taken from Bootstrap – that and more ways to deal with tables in responsive design are here

    You could also look in to writing-mode and/or text rotation to change the text orientation of some of the cells.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design’ is closed to new topics and replies.