Wordpress Ninja Tables CSS Styling

Question

I am trying to find a way to edit each table created through css. I have used other products before like tablepress that created and "id" so you could access the table individually when i looked on the google chrome inspector - i.e. tablepress-id-5

.tablepress-id-5 th {
background-color: #0e4ea0 !important;
color: #fff !important;
padding-top: 4px !important;
padding-bottom: 4px !important;}

I cant find any identifiers for the tables this Ninja Tables creates. Basically im looking to center certain rows and columns.

You can view the page here http://test.pegasusbus.com/orlandomagic/

All tables are inside accordions, but that shouldn't effect anything i would assume. Any help would be great... thank you for taking the time to look.

Answer 1

I used something like

.footable_parent.ninja_table_wrapper  table.ninja_table_pro > thead 
.footable_parent.ninja_table_wrapper table.ninja_table_pro > thead > tr > th 
.footable_parent.ninja_table_wrapper  table.ninja_table_pro >tbody > tr 
.footable_parent.ninja_table_wrapper  table.ninja_table_pro > tbody > tr:hover td

.footable_parent.ninja_table_wrapper table.ninja_table_pro > thead > tr > th {
        background-color: #4CAF50; /* Verde oscuro */
        /* color: white; */
    }

Answer 2

Hi Ninja Tables author here. In Ninja Tables each table has unique css id based on the the table's database id. Here is the few IDs that you may use to apply table specific css:

#footable_parent_{TableID}: This id is available of the wrapper of the table #footable_{TableID}: This id is available in the table tag.

Also You can select all the ninja tables by selecting with css:

.ninja_footable : This css class will be available to all tables build with NinjaTables Plugin.

To see all the features of Ninja Tables Please check the landing page of Ninja Tables

If you have any issue you can submit a support ticket in our website. Our support team is very responsive and helpful.

Answer 3

You could style ALL tables by using classes like this and ignore .foo-table altogether:

table {color: red;}

In otherwords, style all tables this way, rather than just .foo-table tables.

Or if you only want to style .foo-tables, start with the .foo-table class and go from there, see my example. You can either use the id with the id number, the class with the class number, or the .foo-table general class for all foo-table tables, it's up to you. This example is the first table in the first accordion on your home page:

.foo-table {
color: blue;
}

.foo-table button {
background: green;
color: white;
border: none;
padding: 1em 2em;
}

.foo-table th {
color: orange;
}

<div id="footable_parent_985" class="footable_parent wp_table_data_press_parent bootstrap3 ">
                                                <table data-footable_id="985" id="footable_985" class="foo-table ninja_footable foo_table_985 table ninjamagic table-hover ninja_no_color_table footable footable-1 footable-paging footable-paging-right breakpoint-lg" style="display: table;"><thead><tr class="footable-header"><th style="display: table-cell;" class="footable-first-visible">Opponent</th><th style="display: table-cell;">Date</th><th style="display: table-cell;">Game Tier</th><th style="display: table-cell;" class="footable-last-visible">Purchase</th></tr></thead><tfoot></tfoot><tbody><tr><td style="display: table-cell;" class="footable-first-visible">Houston Rockets</td><td style="display: table-cell;">1/3/18</td><td style="display: table-cell;">Two</td><td style="display: table-cell;" class="footable-last-visible"><button style="font-size: 10px">Buy Tickets</button></td></tr><tr><td style="display: table-cell;" class="footable-first-visible">Cleveland Cavaliers </td><td style="display: table-cell;">1/6/18</td><td style="display: table-cell;">One</td><td style="display: table-cell;" class="footable-last-visible"><button style="font-size: 10px">Buy Tickets</button></td></tr><tr><td style="display: table-cell;" class="footable-first-visible">Minnesota Timberwolves</td><td style="display: table-cell;">1/16/18</td><td style="display: table-cell;">Four</td><td style="display: table-cell;" class="footable-last-visible"><button style="font-size: 10px">Buy Tickets</button></td></tr><tr><td style="display: table-cell;" class="footable-first-visible">Sacramento Kings</td><td style="display: table-cell;">1/23/18</td><td style="display: table-cell;">Five</td><td style="display: table-cell;" class="footable-last-visible"><button style="font-size: 10px">Buy Tickets</button></td></tr><tr><td style="display: table-cell;" class="footable-first-visible">Los Angeles Lakers</td><td style="display: table-cell;">1/31/18</td><td style="display: table-cell;">Three</td><td style="display: table-cell;" class="footable-last-visible"><button style="font-size: 10px">Buy Tickets</button></td></tr></tbody></table>        </div>