Wrapping transposed table to page width

  • Resolved cecilg

    (@cecilg)


    6 years, 6 months ago

    Hi Tobias,

    Firstly, thank you again for a brilliant plugin and for the excellent and friendly support you provide.

    Using Tablepress and the terrific extensions you have made available as well, I have effectively been able to create a structure of event listings for our organisation that shows our events (training courses) in filtered tables, sidebars, and front page tiles. The listings contain a clickable button that then launches a widget for event booking service.
    I have also been able to use the import function to load a generated xls sheet that populates a main table with the events we want to list (to match the booking engine service) and then I use that main table to populate 2 other tables; 1 for the sidebars and another for the front page.

    Please see link for detail.

    The sidebar uses a table of 8 rows and 2 cols. Col 1 contains the information and displays this as a list of tiles (cells), col 2 is just sorting information and is hidden. So effectively 1 table column is shown.

    For the front page, I need to show the same list but this time in tiles going across the page (ie horizontally). To do this a use the third table that is in factthe same as the table I use for the sidebar, but is then transposed using code I found in one of your previous responses (https://wordpress.org/support/topic/dynamic-content-16/).
    So here I am then essentially showing a row across the page.

    The problem is getting this row to wrap, ie to get two rows of 4 cells (tiles ) in each. I have tried to see if this would work with flexbox but can’t seem to get it right. Can you possibly suggest a way?

    Hope this is all clear and very much appreciate your help

    Many thanks,

    Cecil

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    flexbox is indeed a nice thing, but unfortunately, I don’t really have tried it with tables My guess actually is that it won’t work that nicely – unless one actually “abuses” the table HTML elements as other elements.

    However, you might not even need it. If I understand you correctly, this might already be sufficient:

    .tablepress-id-9 tbody td {
  display: inline-block;
  max-width: 20%;
  min-height: 285px;
}

    Regards,
    Tobias

    Thread Starter cecilg

    (@cecilg)

    6 years, 6 months ago

    Hi Tobias,

    Thanks for the super-fast response – Its really appreciated.

    Your solution is spot on – wrapped the row as needed. Really great 🙂 My only question is whether it would be possible to align the cells left so that a fifth cell would appear under the first cell etc.

    Again, thanks for the fantastic response and take care,

    Cecil

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi Cecil,

    .tablepress-id-9 {
  text-align: left;
}

    should do that 🙂

    Regards,
    Tobias

    Thread Starter cecilg

    (@cecilg)

    6 years, 6 months ago

    Thanks Tobias,

    That, of course, did the trick 🙂

    We also found that using inline-flex and flex-wrap on the row helped with the adjustment for mobiles and smaller screens. Still fiddling with the css to get the look as wanted – great fun!!!

    Anyhow, again appreciate your support and terrific work.

    Take care,

    Cecil

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    no problem! Always happy to help!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Wrapping transposed table to page width’ is closed to new replies.