WordPress и bootstrap: Адаптивные таблицы

На сайте Центр прав призывника я решил перенести документы с вики на wordpress.

Всё прошло гладко, кроме одного момента: большие таблицы смотрелись криво в адаптивном дизайне.

И я начал искать решение этой проблемы

Для bootstrap 3 добавьте код в functions.php:

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

Для bootstrap 4 добавьте код в functions.php:

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' );

 

 

Leave a Comment