Support » Plugin: WP-Table Reloaded » [Plugin: WP-Table Reloaded] Custom CSS And No Custom CSS

  • Resolved successwill



    First off, i want to thank the author of this great plugin, its awesome.

    But i am unable to use it as i want.

    What i want on my website is to have 2 types of tables

    1. Tables with no Custom CSS : there will be 5-6 tables like this

    2: Tables with Custom CSS: There will be about 300+ tables on the site

    The problem is:

    When i add a custom CSS, it effects the other tables that i dont want to customize.

    i can solve this problem by entering the “id” of the table, but since ill have 300+ tables each on a different page, ill have to add a custom CSS for each one of the tables. And when i take a look at the source code of my website there is a long CSS code.

    To prevent this maybe, i should create another /style.css file and link it to the tables i want to customize.

    Do you have any idea how to do it?

    And i want my tables customized like this:

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg



    this is indeed tricky, but it should be easy to solve this: My suggestion is to use “Extra CSS classes”.

    For each table that shall get that same styling, add something like “wp-table-reloaded-special” to the “Extra CSS classes” field on the table’s “Edit” screen. (So, yes, this will have to be done 300 times.)

    Then, in the “Custom CSS”, instead of using .wp-table-reloaded (for all tables), or a list of .wp-table-reloaded-id-123 classes, you would just use .wp-table-reloaded-special as the first part of the CSS selector.

    By using this method, the two groups of styling would be separate and you wouldn’t run into conflicts.


    Hi Tobias,

    Thank you for quick reply.

    Actually i am not very good at CSS styling or html coding, and i didnt understand very well how you would solve the issue with the above explanation.

    What i am asking is:

    is it possible to create another CSS file and upload it into plugin directory, like below:



    and customizing 2nd type of tables by writing their CSS code into this special.css instead of “Custom CSS” part in plugin’s “Plugin Options” part.

    a code such as:

    .wp-table-reloaded-special td {
      font-family: Tahoma;
      font-size: 13px;
    .wp-table-reloaded-special-id-5 .column-1 {
      width: 190px;
    .wp-table-reloaded-special-id-5 .column-2 {
      width: 55px;
    .wp-table-reloaded-special-id-5 .column-3 {
      width: 55px;
    .wp-table-reloaded-special-id-5 .column-4 {
      width: 60px;
    .wp-table-reloaded-special-id-5 .column-5 {
      width: 60px;
    .wp-table-reloaded-special-id-5 .column-1 {
      font-weight: bold !important;
    color: #3F2C9E !important;
    .wp-table-reloaded-special-id-5 td {
      padding: 8px 0 8px 8px !important;
    .wp-table-reloaded-special-id-5, .wp-table-reloaded-special-id-5 th {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;

    Ok, the above code is not correct, i figured out that i should use .wp-table-reloaded-special once and at the beginning.

    Now i have 2 issues to troubleshootize:

    1.Creating a file (like: /wp-content/plugins/wp-table-reloaded/wp-table-reloaded-special.css) and putting the Custom CSS code into it, will work?

    2.i know how to remove border of a table:

    .wp-table-reloaded-id-N, .wp-table-reloaded-id-N td, .wp-table-reloaded-id-N th {
    border: none!important;
    border-collapse: collapse!important;
    border-spacing: 0px!important;

    this removes all of the borders in table including cells’ borders

    but i still want to have borders between “rows”

    and i want to remove only the border around the entire table

    is this possible?

    For the first issue i did upload a css file like:


    but it didnt work. And i dugg a little further

    i guess it requires some changes in codes here: wp-table-reloaded/controllers/controller-frontend.php

    The corresponding code:

    function add_frontend_css() {
            $default_css = array();
            if ( $this->options['use_default_css'] ) {
                $plugin_path = plugin_dir_url( WP_TABLE_RELOADED__FILE__ );
                $plugin_path = apply_filters( 'wp_table_reloaded_plugin_path', $plugin_path );
                $url_css_plugin = $plugin_path . 'css/plugin.css' . '?ver=' . $this->options['installed_version'];
                $url_css_plugin = apply_filters( 'wp_table_reloaded_url_css_plugin', $url_css_plugin );
                if ( !empty( $url_css_plugin ) )
                    $default_css['plugin.css'] = "@import url(\"{$url_css_plugin}\");";
                // RTL languages support
                if ( is_rtl() ) {
                    $url_css_rtl_plugin = $plugin_path . 'css/plugin.rtl.css' . '?ver=' . $this->options['installed_version'];
                    $url_css_rtl_plugin = apply_filters( 'wp_table_reloaded_url_css_rtl_plugin', $url_css_rtl_plugin );
                    if ( !empty( $url_css_rtl_plugin ) )
                        $default_css['plugin.rtl.css'] = "@import url(\"{$url_css_rtl_plugin}\");";
                if ( $this->options['enable_tablesorter'] ) {
                    switch ( $this->options['tablesorter_script'] ) {
                        case 'datatables-tabletools':
                            $url_css_tabletools = $plugin_path . 'js/tabletools/tabletools.css' . '?ver=' . $this->options['installed_version'];
                            $url_css_tabletools = apply_filters( 'wp_table_reloaded_url_css_tabletools', $url_css_tabletools );
                            if ( !empty( $url_css_tabletools ) )
                                $default_css['tabletools.css'] = "@import url(\"{$url_css_tabletools}\");";
                        case 'datatables': // this also applies to the above, because there is no "break;" above
                            $url_css_datatables = $plugin_path . 'css/datatables.css' . '?ver=' . $this->options['installed_version'];
                            $url_css_datatables = apply_filters( 'wp_table_reloaded_url_css_datatables', $url_css_datatables );
                            if ( !empty( $url_css_datatables ) )
                                $default_css['datatables.css'] = "@import url(\"{$url_css_datatables}\");";
                        case 'tablesorter':
                        case 'tablesorter_extended':
                            $url_css_tablesorter = $plugin_path . 'css/tablesorter.css' . '?ver=' . $this->options['installed_version'];
                            $url_css_tablesorter = apply_filters( 'wp_table_reloaded_url_css_tablesorter', $url_css_tablesorter );
                            if ( !empty( $url_css_tablesorter ) )
                                $default_css['tablesorter.css'] = "@import url(\"{$url_css_tablesorter}\");";
            $default_css = apply_filters( 'wp_table_reloaded_default_css', $default_css, $this->options['use_default_css'], $this->options['tablesorter_script'], $this->options['enable_tablesorter'] );
            $default_css = implode( "\n", $default_css );
            $custom_css = '';
            if ( $this->options['use_custom_css'] ) {
                $custom_css = ( isset( $this->options['custom_css'] ) ) ? $this->options['custom_css'] : '';
                $custom_css = stripslashes( $custom_css );
            $custom_css = apply_filters( 'wp_table_reloaded_custom_css', $custom_css, $this->options['use_custom_css'] );
            if ( !empty( $default_css ) || !empty( $custom_css ) ) {
                $divider = ( !empty( $default_css ) && !empty( $custom_css ) ) ? "\n" : '';
                // $default_css needs to stand above $custom_css, so that $custom_css commands can overwrite $default_css commands
                $css = <<<CSSSTYLE
    <style type="text/css" media="all">
    /* <![CDATA[ */
    /* ]]> */
            $css = apply_filters( 'wp_table_reloaded_frontend_css', $css );
            echo $css;

    i dont know if requires more code-changing on any other part of the plugin. My knowledge is very weak at this point but this is important for me.

    i dont want the content “that is crawled by search engines” to be filled with CSS codes.

    please just tell me what i need to do.

    Plugin Author TobiasBg



    no, you won’t need to modify the plugin’s PHP code. Instead just paste the line

    @import url("");

    into the “Custom CSS” textarea. This will then load all the CSS from that file, instead of having it all in the field.
    Note that I used a URL for the file outside of the plugins folder. That is to prevent the file from being deleted during a plugin update. So, please move your CSS file to “wp-content”.


    Oh so simple. it works. This way i can even categorize the types of the tables and insert a million types of tables.

    Tobias you are awesome.

    Thank you very much.

    Plugin Author TobiasBg



    awesome! And no problem, you are very welcome! 🙂

    Best wishes,

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: WP-Table Reloaded] Custom CSS And No Custom CSS’ is closed to new replies.