Getting rid of table borders

  • Unknown's avatar
    rkoreto · Member ·

    I designed a very simple table on my page to display my book covers. The only thing I want to change is the borders, both internal and external. Is there any way to get rid of them? Change them? I was hoping there would be way on WP, but I can’t find it. Can someone tell me if there is, and if not, a suggestion for the HTML code to delete them. (I tried that but kept getting error messages. My HTML skills are modest.

    http://www.rjkoreto.com

    WP.com: Yes
    Jetpack: No
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    sisdevsoftware · Member ·

    To remove or modify the borders of a table in WordPress, you can use custom CSS code. Here’s a step-by-step guide on how to achieve this:

    1. Access the WordPress Dashboard: Log in to your WordPress website and access the admin dashboard.
    2. Open the Theme Customizer: In the dashboard, navigate to “Appearance” and then click on “Customize.”
    3. Access Additional CSS: Look for the “Additional CSS” option in the left sidebar of the Theme Customizer. Click on it to open the CSS editor.
    4. Target the Table Element: To target the table element specifically, you can use the following CSS code. This code will remove both internal and external borders from all tables on your website:

    .wp-block-table td,
    .wp-block-table th{
    border: none;
    }

    Apply the Changes: Paste the CSS code into the “Additional CSS” box. As soon as you add the code, the table borders should disappear from your website. If you want to apply the changes only to specific tables, you can target them by adding a class or ID to the table HTML and using that in the CSS code.

    SISDEV

  • Unknown's avatar
    aisajib · Member ·

    Hi there!

    The Table block has the option to change the borders, but they don’t show up on your site because the theme you’re using is old and not fully capable of the blocks. If you switch to one of the newer block themes, additional options will show up. You can learn more about this here: https://wordpress.com/support/wordpress-editor/blocks/table-block/#border-settings

    If you don’t want to change the theme just yet, you can use the following CSS code to hide the table borders. This can be used on your site thanks to your WordPress.com Premium plan, which allows using Custom CSS code.

    You’ll want to copy the following code: 

    /* Hide table borders on homepage */
.home .wp-block-table {
  border: none;
}
.home .wp-block-table th,
.home .wp-block-table td {
  border: none;
}

    Then paste it into My Site → Appearance → Customize → Additional CSS.

    Make sure to click Save Changes after pasting the code.

    Feel free to let us know if you have more questions.

  • Unknown's avatar
    rkoreto · Member ·

    Thank you very much. Your time and advice are appreciated! I will try that. However, I only redesigned my WP site a few days ago with this theme. You say it’s an old one–why is it still being offered? Actually, I did change it from any old one, so maybe the old code carried over. Anyway, I’ll give it a try.

  • Unknown's avatar
    rkoreto · Member ·

    Just tried it–it worked! Thanks again.

  • staff-totoro · Staff ·

    Hi there,

    However, I only redesigned my WP site a few days ago with this theme. You say it’s an old one–why is it still being offered?

    To clarify, we do still offer a selected number of our “classic” themes since they are still quite popular and in some cases may not have a modern “block theme” equivalent. These older themes do have general block compatibility, but in some cases (due to the way they are coded) they may not be able to take advantage of all block settings.

    In this case, CSS (provided under your Premium Plan) is a valid workaround, so I’m glad that my colleagues suggestion helped!

  • The topic ‘Getting rid of table borders’ is closed to new replies.