【问题标题】:blue-white striped rows pattern is lost with Datatables 1.10 + BootstrapDatatables 1.10 + Bootstrap 丢失了蓝白色条纹行模式
【发布时间】:2015-04-14 13:47:26
【问题描述】:

我正在使用 Bootstrap 3 + Datatables 1.09,一切都很好。我尝试升级到 Datatables 1.10,我的表格的蓝白色条纹图案不再出现。如果我将“table table-striped”类添加到我的表中,则条纹图案是灰白色的。我怎样才能恢复我原来的蓝色条纹图案? 问候, 帕特里克

【问题讨论】:

    标签: django twitter-bootstrap datatables


    【解决方案1】:

    DataTables 网站上的Bootstrap 3 example 确实显示了一个带有灰色/白色图案的表格,这种样式是在 Bootstrap CSS 文件中定义的。如果不查看您的 CSS 文件及其顺序,很难说为什么升级后样式会丢失。

    要覆盖此模式,请在结束 </head> 标记之前添加以下代码,并将 table-striped 类添加到您的表中。

    <style type="text/css">
    /* BOOTSTRAP 3 TWEAKS */
    .table-striped > tbody > tr:nth-of-type(2n+1),
    .table-striped > tbody > tr.odd {
        background-color: #D9EDF7;
    }
    .table-striped > tbody > tr.even {
        background-color: #FFF;
    }
    </style>
    

    更新:更新了 CSS 以同时为偶数行着色。

    【讨论】:

    • 感谢您的帮助。您的修改仍然是灰色的,但奇怪的是,如果我用偶数代替奇数(当然蓝色行是偶数),它会起作用。
    • 更新了代码以对偶数行进行着色。请注意,此调整将影响所有 Bootstrap 表。如果您只想为基于 DataTables 的表着色,请将 .table-striped 替换为 .table-striped.dataTable
    • 修改后仍然是灰色和白色。如果我交换奇数和偶数,则为白色和蓝色。
    • 当我使用此示例 (datatables.net/examples/styling/bootstrap.html) 并在结束 &lt;/head&gt; 标记之前添加 CSS 代码时,它可以工作。需要查看您的 HTML/CSS 文件来解释为什么它们的行为不同。
    • 再次感谢 Gyrocode。问题可能在我这边。我接受你的回答。祝你有美好的一天。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-06-15
    • 1970-01-01
    • 2017-10-23
    • 1970-01-01
    • 2014-01-16
    • 1970-01-01
    • 2015-12-17
    相关资源
    最近更新 更多