Search

How to Remove a Line Below Table in WordPress (Stripes Style)

WordPress, one of the most popular content management systems, empowers millions of websites with its user-friendly interface and versatile features. When it comes to formatting content, particularly tables, WordPress offers a range of customization options.

However, one common challenge is removing a line that appears below the table, especially when implementing the “Stripes Style” design, where alternating rows are highlighted to enhance readability and comfortability to your readers.

This article will show you how to remove a line below a Table block when implementing the Stripes style in WordPress.

Removing a Line Below Table in WordPress (Stripes Style)

Removing a line below the Table block (stripes style) is easy. The only one you need to do is add the CSS snippet to your WordPress Additional CSS.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the Additional CSS input field:

Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.

.wp-block-table.is-style-stripes {
    border-bottom: 0px;
}

The Code Explanation:

  • .wp-block-table.is-style-stripes: This CSS selector targets an HTML element with the class wp-block-table and an additional class is-style-stripes. Combining these two classes indicates that the code is meant to style a WordPress website’s Stripes Styles of table block.
  • border-bottom: This property controls the bottom border of the Table block when implementing a stripes style.
  • 0px: This value specifies the width of the border; in this case, the width is set to 0 pixels, effectively removing the bottom border.

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

To see the result, go to the WordPress Gutenberg editor, and add a Table block. Afterward, navigate to the Block settings, then set it to Stripes style.

Next, preview the page on the new tab or window once you set the Tabe block to the stripes style.

As you can see from the image above, a line below the Table block when you’ve added the CSS snippet to the Additional CSS, a line below the Table block (stripes style) is perfectly removed.

The Bottom Line

This article shows how easily you can remove a line below a table when implementing the stripes style in WordPress. Eliminating the lines below tables in WordPress while applying a stripes style can be achieved through straightforward CSS modifications. You can effortlessly create a more visually appealing and seamless table presentation on your website.

We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment