auto-sizing the table

Viewing 10 replies - 1 through 10 (of 10 total)
  • Rosetta Facciolini

    (@ramthas)

    10 years, 7 months ago

    appearance answer, responsive table need. thank you

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 7 months ago

    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

    Thread Starter Bluelefant

    (@bluelefant)

    10 years, 7 months ago

    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.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 7 months ago

    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

    Thread Starter Bluelefant

    (@bluelefant)

    10 years, 6 months ago

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

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 6 months 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!

    Thread Starter Bluelefant

    (@bluelefant)

    10 years, 6 months ago

    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?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 6 months ago

    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

    Thread Starter Bluelefant

    (@bluelefant)

    10 years, 6 months ago

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

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 6 months ago

    Hi,

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

    Best wishes,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘auto-sizing the table’ is closed to new replies.