auto-sizing the table

appearance answer, responsive table need. thank you

Hi,

thanks for your question, and sorry for the trouble.

Instead of what you are using now, please try this:

.tablepress-id-menu img {
  max-width: 100%;
}
.tablepress-id-menu th,
.tablepress-id-menu td {
  padding: 2px;
}

Regards,
Tobias

Tobias, thank you for your help.

It worked perfectly on Safari, but on Firefox, it’s still giving me big images and a table that stretches way off the right side of the page.

Hi,

ok, please try again with

.tablepress-id-menu img {
  max-width: 100%;
  width: 100%;
}
.tablepress-id-menu th,
.tablepress-id-menu td {
  padding: 2px;
}

Regards,
Tobias

Awesome, that did the job! Thanks man! I appreciate it ??

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!

Could I ask for some additional help?

So, after looking at some other threads, I’ve added:

<div class="tablepress-scroll-wrapper">[table id=ATL /]</div>

and

<div class="tablepress-scroll-wrapper">[table id=NBA]</div>

as well as

.tablepress-scroll-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
}

.tablepress-id-NBA img {
	max-width: 100%;
	width: 100%;
}

.tablepress-id-NBA th,
.tablepress-id-NBA td {
	padding: 2px;
}

and the horizontal scrolling is working like a dream, but when I look at it on my iPhone, the images from 1-9 are all way smaller than the images from 10-30. I’m guessing because it’s conforming to the size of the single digit versus the double digit numbers. Anyway around this besides adding a ‘0’ in front of the numbers?

Hi,

we could try setting a minimum width for the images here, e.g. by using

.tablepress-id-NBA img {
	min-width: 19px;
	max-width: 100%;
	width: 100%;
}

instead of

.tablepress-id-NBA img {
	max-width: 100%;
	width: 100%;
}

Regards,
Tobias

Thanks again sir, you’re the greatest! I really appreciate all your help and support.

Hi,

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

Best wishes,
Tobias