Change width of table & center it – working on some and not on others

  • Resolved Danb3434

    (@danb3434)


    8 years ago

    Hi there,

    Love the work with the plug in.

    So what I am trying to do is change the width of the tables and center them, whilst staying responsive for mobiles. I found this thread:
    https://www.ads-software.com/support/topic/center-and-resize-table/

    And used the advice in that thread. I added the following to the page:

    <div id=ipa>
[table id=3  /]</div>

    And then added the following to the custom CSS:

    div#ipa {
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}

    And it worked, so I was very happy. It looks how I want it to on the page on desktop and on mobile. You can find the page here – https://brewconductor.com/styles/india-pale-ale-ipa/

    However, when I tried to replicate my success on another page, it looks correct on desktop, but on mobile it is not responsive.
    The on page code for the second page is as follows:

    <div id=porter>
[table id=4  /]</div>

    And I added this to the custom CSS:
    `div#porter {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    }’

    I first tried with the first IPA div, but it had the same effect as with a new, second div tag.
    The second page which is not responsive on mobile can be found here – https://brewconductor.com/styles/porters-and-stouts/

    Would very much appreciate any help.

    Kind regards,

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Actually, your code does not include any specific commands regarding responsiveness. You are basically just centering the tables, and asking the browser to not make it wider than those 550px. There’s nothing in the code that dictates what’s to happen on small screeens.
    I would therefore suggest that you first uncheck the “Use DataTables” checkbox on the table’s “Edit” screens (as you have turned off the individual features already, anyways).
    Then, I recommend to take a look at https://tablepress.org/extensions/responsive-tables/ for some ideas on responsiveness.

    Regards,
    Tobias

    Thread Starter Danb3434

    (@danb3434)

    Hi Tobias,

    Thanks for the suggestion.
    I unchecked the “Use Datatables” checkbox, but the problem still persists. I just don’t understand why it renders fine on one table but not another. I will take a look at the link and see if I can make sense of it.

    Kind regards,

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    what do you mean with “renders fine” on one but not the other? For me, they show pretty much the same behavior.
    Have you tried the Reponsive Tables Extension?

    Regards,
    Tobias

    Thread Starter Danb3434

    (@danb3434)

    Hi Tobias,

    Thanks for the reply, by render I meant that on mobile, the IPA table looked good, the width of it is decreased allowing it to fit onto the mobile display nicely, without the need for the scroll, flip or collapse function which the extension gives.

    I have tried the extension and whilst it does allow the tables to be viewed with the scroll function, again it only works for one – the one on this page – https://brewconductor.com/styles/india-pale-ale-ipa/

    The other tables remain not respsonsive:
    https://brewconductor.com/styles/porters-and-stouts/

    I really appreciate your continued support on this issue.

    Kind regards,

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    the reason why one table fits while the other doesn’t simply is that length of the content in that table. There’s for example the word group “brown/almost”. This is treated as one word by the browser, so that it can not add word-wrapping/line breaks. This means that this word defines the minimum width for that column, i.e. the column will never be more narrow than this word – unless you add e.g. a space after the / or unless you reduce the padding (inner white space) in the cells or reduce the font size.
    This is why an approach for responsiveness is necessary in the first place.

    Now, are you sure that you modified the Shortcode for the porter table accordingly? It seems that no mode for responsiveness is set via the Shortcode, which is why e.g. the scrolling is not working right now.
    Also, for the IPA table, you still seem to have enabled the “Use DataTables” checkbox?

    Regards,
    Tobias

    Thread Starter Danb3434

    (@danb3434)

    Thanks for the help, got it all working & donated.
    Kind regards

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!
    And thanks for the donation, I really appreciate it!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change width of table & center it – working on some and not on others’ is closed to new replies.