Adjust Gutenberg Table Block column width individually

  • Unknown's avatar
    vidianhosting · Member ·

    Hi there,

    I have been working on a website for my client who repairs smart devices. We’ve made a template repair page that we can use for all devices, but there’s a pricing table on there that has incorrectly sized columns.

    I would like to be able to set the width of columns individually, as I would like to have the servicename column 70% width and the “pricing” and “duration” column to both be 15%.

    There are no settings for this. When trying to edit the block through HTML by adding classes to the <th> and <td> elements, the block becomes “corrupt” according to WP.

    I have purposely chosen for the table block instead of creating a table out of column blocks, as the endgoal is to have the client be able to adjust the repair pages. That means making the entire process as easy as possible and columns lost against actual tables in regards to practicality.

    The website I’m working on can be found on our test environment:
    https://trusttelecom.ontwerponlineassistants.nl/

  • aleone89 · Staff ·

    Hello there,

    This site is not hosted with us on WordPress.com, but using the open source WordPress software at another hosting provider. This is a bit different to a site hosted on WordPress.com. You can read about these differences here: https://en.support.wordpress.com/com-vs-org/

    This means we are unable to provide assistance with this help.

    I would advise assigning the <td> element a class and assigning custom CSS to help dictate the width.

    https://www.w3schools.com/tags/tag_td.asp

    I hope this helps.

  • Unknown's avatar
    vidianhosting · Member ·

    Thanks for your reply aleone.

    I’m sorry for messing up and selecting the incorrect forum. However, this may still be of interest to you as it regards a standard WordPress feature that has some limitations you might want to look into.

    I have already tried your suggestion, but this is where the limitation shows itself:

    When trying to add custom HTML to a Gutenberg Block (not just the table block), WordPress marks the block as corrupted once you try and switch back to visual editor mode for the block. This also happens when editing the block HTML and then clicking another block, making you escape the one you are editing.

  • The topic ‘Adjust Gutenberg Table Block column width individually’ is closed to new replies.