Support » Plugin: TablePress » Responsive layout question (fourth option?)

  • Resolved vonJanne

    (@vonjanne)


    Hi,

    the page I need help with is not live yet. But here’s my question: I have a small table with just three columns, and maybe 3-6 rows. The table shows event data: When, Where, What. On small screens I would just like the table header to disappear and the content of the three cells to merge into one per row, e.g.:

    —————————————–
    20 July | Main Street Club | Jam session
    —————————————–

    turns into

    ——————-
    20 July
    Main Street Club
    Jam session
    ——————-

    I’d be happy to use the extension and also donate 9$ for it, but I’m not sure: Can the extension do what I want?

    Cheers!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    There’s no direct option for this in the TablePress Responsive Tables Extension, you can however achieve this with some CSS code. For example, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media screen and (max-width:768px) {
      .tablepress-id-1 thead {
      	display: none;
      }	
      .tablepress-id-1 td {
      	display: block;
      	text-align: center;
      }	
      .tablepress-id-1 tr {
      	border-top: 3px solid #ffffff;
      }	
    }

    Regards,
    Tobias

    Hi,

    Thanks, that helps a lot! I decreased the font-size a bit and included some soft-hyphens too, now it looks very good. Appreciate the quick and competent support, that’s worth a donation from me! 🙂

    Cheers

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.