Wordpress Ninja Tables CSS 样式

Question

我正在尝试找到一种方法来编辑通过CSS创建的每个表格。我之前使用过其他产品，例如创建了“id”的 tablepress，这样当我查看 google chrome 检查器时，您可以单独访问该表 - 即 tablepress-id-5

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

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

您可以在这里查看页面 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 Tables 作者在这里。在 Ninja Tables 中，每个表都有基于表的数据库 ID 的唯一 css id。以下是您可以用来应用表特定 css 的几个 ID：

#footable_parent_{TableID}

：此 id 可用于表的包装器

#footable_{TableID}

：这个id可以在table标签中找到。

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

.ninja_footable

：此 css 类将可用于使用 NinjaTables 插件构建的所有表格。

要查看 Ninja Tables 的所有功能，请查看 Ninja Tables

的登陆页面

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

Answer 3

我用过类似的东西

.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; */
    }