Adjusting Column Width on Mobile Responsive View

Hi,

thanks for your post, and sorry for the trouble.

Changing the width like this (especially not for all tables at the same time) will probably not work. Instead, I recommend to prevent automatic line breaks, on small screen. For that, you can try

@media (max-width: 768px) {
  .tablepress-id-1 .column-2,
  .tablepress-id-2 .column-2 {
    white-space: nowrap;
  }
}

Regards,
Tobias

Hi Tobias

Thank you so much for your quick reply.

This worked great for the column 2. How about if I want to show text in 2 lines on the other columns? If i use the code you provided for other columns, the width becomes too wide…

Any suggestions would be appreciated!

Thank you

R

Hi,

I would actually not try messing with column widths too much. Usually, this causes more problems than it helps.
Instead, we could try reducing the padding (inner white space) in the cells.
For that please add this:

.tablepress th,
.tablepress td {
  padding: 8px !important;
}

Regards,
Tobias

Hi Tobias,

Thank you for the additional code – however, it’s not quite doing what I need… it actually reduce the width of the actual column… do you have any other suggestions?

Thank you for your help!

R

Hi,

I’m not sure what you are actually trying to achieve here, which is why I don’t really know what to suggest…

Regards,
Tobias

Hi Tobias

Apologies for my lack of explanation!

I attach the screenshot – you’ll see that the text underneath the price ￡304 appears 2 letters in each line and it’s not quite readable. If I use the code “white-space: nowrap;” the column automatically adjust to fit all the text in one line which creates the column too wide. Is there a way to adjust the column width to fit longer text in 2-3 lines? I hope this make sense…

Link to the screenshot: https://www.dropbox.com/s/emmft0mv6i7ibz8/screenshot1.png?dl=0

Thank you for your help.

R

Hi,

no, sorry. You can either prevent all automatic line breaks or none.
I think,

.tablepress-id-1 tbody td {
  white-space: nowrap;
}

is the best choice here, as the horizontal scrolling will then take effect.

Alternatively, by reducing the padding (using the CSS code from above), you can give the text more space, so that less automatic line breaks will be added.

Regards,
Tobias

Hi Tobias

This is exactly what I was looking for! Worked perfectly.

Thank you so much for your help!

R

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!