Styling WordPress Ninja Tables with CSS

I am currently seeking a solution to customize each table generated through CSS. In the past, I have utilized tools like TablePress which assigned a unique "id" to each table, allowing for individual customizations when inspecting through Google Chrome - for example, tablepress-id-5.

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

However, I am unable to locate any identifiers for tables created by Ninja Tables. Essentially, I am aiming to center specific rows and columns within the tables.

You can take a look at the page here:

While all tables are enclosed in accordions, I do not believe this should impact the customization process. Any assistance on this matter would be greatly appreciated. Thank you for dedicating your time to assist.

htmlcsswordpresscss-tablesninja

Answer №1

If you want to apply a uniform style to all tables, you can use classes to style them and disregard the specific .foo-table class:

table {color: red;}

In simpler terms, this approach will style all tables in the same manner, instead of just targeting .foo-table tables.

On the other hand, if you specifically want to style .foo-tables, you can start with the .foo-table class and customize from there. For instance:

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

Answer №2

Greetings from the creator of Ninja Tables! Each table in Ninja Tables is assigned a unique CSS ID based on the table's database ID. Here are a few IDs that you can use to apply CSS specific to each table:

#footable_parent_{TableID}: This ID is for the wrapper of the table. #footable_{TableID}: This ID is for the table tag itself.

You can also select all Ninja Tables using the following CSS selector:

.ninja_footable: This class is applied to all tables created with the NinjaTables Plugin.

To explore all the features of Ninja Tables, be sure to visit the official landing page here.

If you encounter any issues, feel free to submit a support ticket on our website. Our support team is dedicated, responsive, and ready to assist you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to add an insert button to every row?

Take a look at the image provided. When I click on any register button, the last row is being inserted instead of the desired row. What I'm aiming for is this: when I click register, the entire selected row should be stored in a separate table. Whe ...

javascriptphphtmlmysqli

Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, a ...

htmlcss

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Is there a way to include an icon before the title of each open tab? I am currently using the antd library for tab creation, which doesn't provide a direct option for adding icons. Here is my code snippet along with a link to the jsfiddle https://jsfi ...

javascriptcssreactjsantd

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

javascriptjqueryhtmlcsshighcharts

I am looking to incorporate a scroll feature into my form, as it is being displayed within a modal that is a separate component

Due to the size of my employee form exceeding the screen capacity, I need to incorporate a scroll property into my modal content. The form contains numerous fields that cannot be modified. Could you assist me in resolving the scrolling issue? Thank you! ...

cssreactjs

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

For creating breadcrumbs in Bootstrap 5, the documentation suggests the following code: <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home ...

cssbootstrap-5

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

htmlcssbootstrap-5

Transfer information to a different division using Ajax

I am attempting to transfer data to another div after an Ajax refresh. Each time it refreshes, new data is fetched from the database. My goal is to retain the old data displayed in the first div, store it, and then move it to the second div when Ajax refre ...

jqueryhtmlajax

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascriptjqueryhtmlcsssass

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...

javascriptangularjsajaxhtmlasp.net-ajax

Issue with drop-down menu functionality on mobile-friendly website

After deciding to revamp my website for responsiveness, I encountered an issue with the menu not displaying on smaller screens. Everything else is functioning correctly except for the drop-down menu! Here is the HTML code: <!doctype html> <html ...

jqueryhtmlcss

Is it possible to use jQuery animation to smoothly transition the background color?

I'm currently working on a function to dynamically change the background color of a div based on an array of colors. Here's what I have so far: HTML: <div class="bg-color"> CSS: .bg-color { width: 500px; height: 500p ...

javascriptjqueryhtml

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

I have a lightweight and easy-to-understand code for a website project with two panels. The first panel on the left is a large navigation (270px width, top to bottom, similar to a wiki) with approximately 30 unordered list items. Next to it is the second ...

javascripthtmljquerycsssidebar

Is it possible to target li a instead of li in jQuery and CSS?

Currently in the process of integrating bootstraps scrollspy on my website, while also working with a menu similar to this example: At the moment, I am able to target the li in the navigation, but what I really want is to target the li a. selector = ...

jquerycsshtml-lists

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

javascripthtmljquery

Ways to conceal or deactivate button controls on videojs?

I am building an application using video.js and Vue. I am looking for a way to hide or disable certain controls like the play button, playback rate, and make the progress bar read-only. In the video.js documentation, I found that using controls: false hi ...

javascripthtmlvue.jsvideo.js

Is there a restriction on the number of stylesheets per page in Internet Explorer 8?

Discussing the limitations of CSS in a forum thread, a user shared insights: A user mentioned that Internet Explorer has is known to have a restriction of 4096 CSS rules per file. For more information, check out this source. Additionally, there might be ...

cssinternet-explorerinternet-explorer-8

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

javascriptjqueryhtmlcssmatch

Disabling all images within a <td> element by selecting them

Here is a sample of my HTML code: <table class="disabled"> <tr> <td> <input blah blah> </td> <td> <img id="reallyLongASP.NetID" etcetc/> </td> </tr> < ...

asp.nethtmlcsscss-selectors

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

javascriptjqueryhtmlcss