Responsive scroll table column width

  • Resolved valeriodonfrancesco

    (@thor486)


    6 years ago

    Hello, I added a Tablepress generated table to a page on the website I’m designing. I installed the responsive tables extension and I set the table to scroll. When the website is shown on mobile the table goes to scroll mode but the columns are too small, is there a way to change the column width?

    I tried changing the css but it doesn’t seem to work, I added this CSS code:

    .tablepress-id-3 .column-1 {

    text-align: left;
    width: 15%;
    font-weight: normal;
    line-height: 2;
    }

    .tablepress-id-3 .column-2,
    .tablepress-id-3 .column-3,
    .tablepress-id-3 .column-4,
    .tablepress-id-3 .column-5,
    .tablepress-id-3 .column-6 {

    width: 17%;
    }

    Thank you.

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

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

    (@tobiasbg)

    6 years ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Besides setting the column width, which is fine, you could try setting a minimum column width, as an absolute pixel value:

    .tablepress-id-3 .column-2,
.tablepress-id-3 .column-3,
.tablepress-id-3 .column-4,
.tablepress-id-3 .column-5,
.tablepress-id-3 .column-6 {
  width: 17%;
  min-width: 150px;
}

    With that, the table should not become too narrow on small screens.

    Regards,
    Tobias

    Thread Starter valeriodonfrancesco

    (@thor486)

    6 years ago

    Thank you, it’s working now 🙂

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years ago

    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)

The topic ‘Responsive scroll table column width’ is closed to new replies.