Gutenberg table block with Bootstrap .table class
-
17-04-2021 - |
質問
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.
解決
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;
}
}
他のヒント
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' );
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;
}
}
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.