如何更改标题wenzhixin引导表的样式？

Question

我正在尝试使用wenzhixin bootstrap-table更改表的标头样式。但是class =“ info”不起作用。 有一个代码：

 <table data-toggle="table" data-height="700" data-classes="table table-striped table-bordered table-hover"> <thead> <tr class="info"> <!--it doesn't work--> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <th>0</th> <th>Item 0</th> <th>10</th> </tr> </tbody> </table> 

请帮忙。 如何更改标题引导表的样式？

PS如果使用没有wenzhixin引导表的引导程序，那么一切正常，但是对我来说，wenzhixin引导表是必要的

Answer 1

如果仅使用class ，而不是data-classes属性，则可以在Firefox，chrome和ie7 +上解决问题。

问候，希望它能解决您的问题。

Answer 2

检查：

<style>
       #tableID thead tr{
          background-color: #0361cc; color:white;
       }
</style>

Answer 3

我遇到过同样的问题。 bootstrap-table从thead ， tr和th标签bootstrap-table删除类和样式。 如果您还使用stickyTableHeaders （背景不是白色而是透明的），那么这比令人沮丧的要多。 bootstrap-table提供了load-success事件，该事件在呈现表之后触发。 之后，您可以使用它来将类/样式附加到表中。 请注意，您的表需要一个id

$('#myTable').on('load-success.bs.table', function (e, data) {
    $('#myTable').stickyTableHeaders();
    $('#myTable thead tr').css('background','white');
});

因此，要完成您的剪裁，应执行以下操作：

<table id="myTable" data-toggle="table" data-height="700" data-classes="table table-striped table-bordered table-hover">
    <thead>
        <tr class="info"> <!--it doesn't work-->
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>0</th>
            <th>Item 0</th>
            <th>10</th>
        </tr>
    </tbody>
</table>
<script>
    $('#myTable').on('load-success.bs.table', function (e, data) {
        $('#myTable thead tr').css('background','pink');
    });
</script>