In a plugin: How do I set table cell widths ?

  • Hi,
    I’m creating a plugin, which has a loop of data,
    …and this data is displayed correctly,
    …as a list, in a WordPress Page, via a ‘shortcode’ eg: [my_list]

    But I wish to display this list in a table.

    So in a test (non wordpress) php page:
    In php code, I’ve created a table, which works OK, ie:

    $output = ‘ <table style=”width:100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td style=”width:100%” colspan=”3″>?</td>
    </tr>
    <tr>
    <td style=”width:10%”>?</td>
    <td style=”width:45%”>?</td>
    <td style=”width:45%”>?</td>
    </tr>
    </table>’;

    So this table has:

    2 rows
    top row: one cell @ 100%
    2nd row: 3 cells @ 10% + 45% + 45%

    [ 100% ]
    [10%][ 45% ][ 45% ]

    BUT when I copy this into my plugin:

    It wont display the first-cell at 10%
    …instead: it displays all 3 cells at the same width (ie: 33%)

    [ 100% ]
    [ 33% ][ 33% ][ 33% ]

    HOWEVER:
    If I just remove the top row, so that I just have the second row,
    then its proportions display correctly, ie:

    [10%][ 45% ][ 45% ]

    I’ve also found that certain style-sheets (in the WordPress-pages theme) seem to be causing the problem, but I thought that my tables inline-style-settings should over-ride any earlier styles in the style sheet !

    So what’s going on ??

    NB: I’m using: WordPress V:4.2.2 / theme: twentyfifteen

    Many thanks. Mac

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter eightdaysaweek

    (@eightdaysaweek)

    Hi,
    Any help greatly appreciated.
    Many thanks. Mac

    Hi,

    thanks for your post and the email. I normally can’t give support for non-TablePress questions, but as this is related to tables, I’ll give it a look.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter eightdaysaweek

    (@eightdaysaweek)

    Hi Tobias,
    Thanks very much for your help.
    But I don’t have an on-line link, because I’m creating it on my PC’s (off-line) server.

    But the code is exactly as I’ve described above.

    Many thanks. Mac

    Hi,

    I’m afraid that I won’t really be able to help in that case, as I can’t inspect the CSS of the page if it’s not online ??

    The HTML code is totally fine, so that it must be some CSS by either your theme or another plugin.

    Regards,
    Tobias

    Thread Starter eightdaysaweek

    (@eightdaysaweek)

    Hi Tobias,
    If its a help:
    I can email you a copy of my WordPress-Pages’ html, which includes my tables resultant code, & the links to all of the external CSS files in the theme, etc,.

    Those links will lead to the CSS files, in the themes folder of the downloadable WordPress package.

    If so, where do I send it ?

    Many thanks. Mac

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Easier if you replicate the problem using CSS desk: https://www.cssdesk.com/

    Thread Starter eightdaysaweek

    (@eightdaysaweek)

    Hi Andrew,
    Thanks for the info, I’m not familiar with CSS desk, but I’ve just had a look, & I’m not sure how I could use it to reproduce the page, as it seems to require the html & CSS entered separately.

    …whereas the code content of a displayed WordPress-Page only shows the html + the links to the effective CSS.

    Obviously: I could just copy & paste the contents of the my WP-page into the html window of CSS desk, would that work ?

    Thread Starter eightdaysaweek

    (@eightdaysaweek)

    Hi Tobias,
    BTW: I noticed that, if I disable this CSS file, then my table-cells display correctly, ie: wp-content\themes\twentyfifteen\style.css

    Many thanks. Mac

    Hi,

    sorry, but I don’t have the time and resources at the moment to work on this locally at the moment. It would be really good if you could set up a test site that shows the problem online.

    Now, if that main CSS files of Twenty Fifteen provocates the issue, that indicates that it’s a CSS issue. Can you therefore maybe try with other WordPress default themes as well?

    Also, you could maybe try to look at this in more detail yourself, by using the Developer Tools of your browser (I prefer those of Google Chrome). Maybe that helps finding the CSS declaration that is causing this for you?

    Regards,
    Tobias

    Thread Starter eightdaysaweek

    (@eightdaysaweek)

    Hi Tobias,
    Many thanks for taking the time to reply:

    Also, you could maybe try to look at this in more detail yourself, by using the Developer Tools of your browser (I prefer those of Google Chrome). Maybe that helps finding the CSS declaration that is causing this for you?

    I have tried to solve this myself, including using the FireFox browser DT, but find them a bit confusing, but I’ll try chrome.

    And as I said at the start:

    ….but I thought that my tables inline-style-settings should over-ride any earlier styles in a external-style-sheet !

    So could give me a clue as to why an external-style-sheet, would override (or affect ?) my tables inline-style-settings ???

    Many thanks mac

    Try to add this to your css

    table {table-layout: auto;}

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘In a plugin: How do I set table cell widths ?’ is closed to new replies.