Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 23, 2015 at 4:46 pm #416459
    Sandy

    The table element looks great on desktop computers. On mobile, the table changes to a single column – which is expected. The order of items displayed in a single column results in a confusing list of data that can’t be made sense of. Is there a way to control the display hierarchy of the items in the table?

    Current:
    2nd Heading Row (of all default columns)
    Default Row / Description Column
    Default Row / Default Column (of all default columns)
    2nd Default Row / Default Column (of all default columns)
    (and so on)

    Desired:
    Heading Row (default column 1)
    2nd Heading Row (default column 1)
    Default Row / Default Column (default column 1)
    2nd Default Row / Default Column (default column 1)
    (and so on down the 1 column)
    Heading Row (default column 2)
    2nd Heading Row (default column 2)
    Default Row / Default Column (default column 2)
    2nd Default Row / Default Column (default column 2)
    (and so on down the 2 column)
    (and so on to complete the table)

    March 24, 2015 at 5:50 pm #417228
    Elliott

    Hey m!

    Add this to your custom CSS.

    @media (max-width:400px) {
table tbody > tr:nth-child(1), table tbody > tr:nth-child(2) {
  display: none !important;
}
}

    And with how you currently have the table setup I think your wanting to do this, https://kriesi.at/support/topic/bug-table-headers-applied-incorrectly-on-media-query/.

    Regards,
    Elliott

    March 25, 2015 at 2:26 pm #417740
    Sandy

    Thanks but this didn’t change the display on mobile. It still has the same problem. I just need to change the look on mobile so the data is in a sensible order on mobile.

    March 25, 2015 at 3:05 pm #417766
    Yigit

    Hey!

    Can you please try changing the code to following one

    @media only screen and (max-width: 480px) {
table tbody > tr:nth-child(1), table tbody > tr:nth-child(2) {
  display: none !important;
}
}

    Best regards,
    Yigit

    March 25, 2015 at 6:09 pm #418024
    Sandy

    Tried it, but the mobile still looks the same.

    March 27, 2015 at 4:58 pm #419407
    Elliott

    Hi!

    Perhaps you have a typo in your CSS somewhere. Send us a WordPress login and we’ll take a closer look.

    Cheers!
    Elliott

    March 30, 2015 at 11:46 am #420340
    Sandy

    sending…

    March 30, 2015 at 1:08 pm #420374
    Sandy
    This reply has been marked as private.
    April 1, 2015 at 4:08 pm #421982
    Elliott

    Hi!

    Can you upgrade the login to admin?

    Best regards,
    Elliott

    April 1, 2015 at 6:33 pm #422087
    Sandy
    This reply has been marked as private.
    April 2, 2015 at 12:16 pm #422419
    Ismael

    Hey!

    Please remove all css modification for the table then edit the table element on the page. Set the table purpose to tabular then adjust the responsive styling to make the entire table scrollable.

    Regards,
    Ismael

    April 3, 2015 at 4:04 pm #423127
    Sandy

    Thanks, this worked! :)

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Viewing tables on mobile devices – confusing order of items displayed’ is closed to new replies.