1

On my frontend I am using Boostrap 4, however Gutenberg block table has class <table class="wp-block-table"> so instead of creating new table style it would make more sense to append the Boostrap table class to wp-block-table class. Would like to know if this possible. Thanks.

2

4 Answers 4

0

Since my theme did not recognize wp block table class I have added table Sass class from Gutenberg to my theme.

.wp-block-table {
  width: 100%;
  min-width: 240px;
  border-collapse: collapse;
  margin-bottom: 24px;

  td, th {
    padding: .3em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    word-break: break-all;
  }
  th {
    text-align: center;
  }
}
0

Good solution is to add this to functions.php of your theme (taken from there):

function theme_prefix_bootstrap_responsive_table( $content ) {
    $content = str_replace(
        [ '<table>', '</table>' ],
        [ '<table class="table table-bordered table-hover table-striped table-responsive">', '</table>' ],
        $content
    );

    return $content;
}

add_filter( 'the_content', 'theme_prefix_bootstrap_responsive_table' );
0

Tables were not showing with the Wordpress Magazinely theme.

Adding this code (from Benjamin Franklyn above) worked for me. Add it to Apperance -> Customize -> Additional CSS

.wp-block-table {
  width: 100%;
  min-width: 240px;
  border-collapse: collapse;
  margin-bottom: 24px;

  td, th {
    padding: .3em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    word-break: break-all;
  }
  th {
    text-align: center;
  }
}
1
  • Can you nest the CSS selectors like that?
    – phatskat
    Commented Mar 2, 2021 at 22:35
-1

You can add .table as the class under the "block settings" for the table block. You can also add additional classes such as .table-bordered and .table-styled. All table class references can be found in the Bootstrap Docs.

gutenberg-class

1
  • 1
    The classes on that field will get added to the <figure class="wp-block... and not on the <table> inside it. Commented Jun 27, 2020 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.