Column Width (Responsive)

  • Resolved Blair Geddes

    (@primalspace)


    1 year, 8 months ago

    We’ve recently installed your plugin and have created several tables for the same page of our site. However, we’re running into problems with the tables not showing fully on mobile.

    We’re also looking to create equal column widths but the guidance provided for this on the FAQ is to set using PX sizing which won’t allow the table to load responsively across mobile and desktop.

    Hoping you can you help us find a solution for this? Thanks.

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

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    1 year, 8 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Let’s start with the column widths: Instead of using px values, you can of course also use other CSS units, like % here. In your case, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 th,
.tablepress-id-1 td {
  width: 33.3%;
}

    This should give the table three equally wide columns.

    Now, for responsiveness, just changing column widths will not work. Your table contains some long words, like “communications”, “Responsibilities”, and “exceptional” in adjacent columns. These then define the minimum width for each column, as the browser will not add arbitrary word-wrapping in these words.
    Forcing this, could be one approach, e.g. by extending the CSS from above to

    .tablepress-id-1 th,
.tablepress-id-1 td {
  width: 33.3%;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

    Alternatively, you could look into using approaches like scrolling, see https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Column Width (Responsive)’ is closed to new replies.