带Bootstrap的Gutenberg表块.table类

时间:2019-06-09 作者:Benjamin Franklin

在我的前端,我使用Boostrap 4,但Gutenberg block table有类<table class="wp-block-table"> 因此,与其创建新的表样式,不如将Boostrap表类附加到wp-block-table 班想知道这是否可能。谢谢

4 个回复
最合适的回答,由SO网友:Benjamin Franklin 整理而成

由于我的主题不识别wp block table类,所以我在主题中添加了来自Gutenberg的table Sass类。

.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;
  }
}

SO网友:Xdg

好的解决方案是将其添加到函数中。主题的php(已拍摄)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\' );

SO网友:Richard Stimson

表格未显示Wordpress Magazinely主题。

添加此代码(来自上面的BenjaminFranklyn)对我很有用。将其添加到外观->;自定义->;其他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;
  }
}

SO网友:RaajTram

您可以添加.table 作为“块设置”下的类,用于表块。您还可以添加其他类,例如.table-bordered.table-styled. 所有表类引用都可以在Bootstrap Docs.

gutenberg-class

相关推荐

Display Tables in a slider

我正在开发一个网站,我希望用户能够浏览表格,有点像画廊。我希望一次只能看到一张表,并且能够单击箭头查看下一张表。这些表将经常用新数据更新。目前,我在TablePress中有这些表,它们以某种博客格式显示,一个接一个。用户必须进行大量的滚动,而且这不是一个非常干净的设置。我试着寻找一个可以做到这一点的插件,但我找到的所有插件都只用于图像,不适用于Tablepress表。如何更好地显示这些表?