Wordpress Ninja Tables CSS Styling

Question

我正在尝试找到一种方法来编辑通过 css 创建的每个表。我以前使用过其他产品，例如创建的 tablepress 和"id"，因此当我查看谷歌浏览器检查器时，您可以单独访问该表 - 即 tablepress-id-5

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

我找不到此忍者表创建的表的任何标识符。基本上，我希望将某些行和列居中。

您可以在此处查看页面 http://test.pegasusbus.com/orlandomagic/

所有桌子都在手风琴内， 但这不应该影响我假设的任何事情.任何帮助都会很棒...感谢您抽出宝贵时间查看。

Answer 1

您可以使用这样的类来设置所有表的样式，并完全忽略 .foo-table：

table {color: red;}

换句话说，以这种方式设置所有表的样式，而不仅仅是 .foo-table 表。

或者，如果您只想设置 .foo-tables 的样式，请从 .foo-table 类开始，然后从那里开始，请参阅我的示例。您可以将 id 与 id 号一起使用，将类与类号一起使用，或者将 .foo-table 通用类用于所有 foo-table 表，这取决于您。此示例是主页上第一个折叠琴中的第一个表：

.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

嗨，

忍者表作者在这里。在 Ninja 表中，每个表都有基于表的数据库 ID 的唯一 css ID。以下是可用于应用特定于表的 css 的几个 ID：

#footable_parent_{TableID}：此 id 可用于表的包装器 #footable_{TableID} ：此 ID 在表标记中可用。

您也可以通过使用 css 选择来选择所有忍者表：

.ninja_footable ：这个 css 类将可用于所有使用 NinjaTables 插件构建的表。

要查看忍者

表的所有功能，请查看忍者表的登录页面

如果您有任何问题，可以在我们的网站上提交支持票证。我们的支持团队反应迅速且乐于助人。