如何更改标题 wenzhixin bootstrap-table 的样式？答案

【问题标题】：How can I change style for header wenzhixin bootstrap-table?如何更改标题 wenzhixin bootstrap-table 的样式？
【发布时间】：2016-03-24 06:03:26
【问题描述】：

我正在尝试使用 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>

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

附：如果使用 bootstrap 而不使用 wenzhixin bootstrap-table，那么一切正常，但对我来说这是必要的 wenzhixin bootstrap-table

【问题讨论】：

标签： bootstrap-table tableheader

【解决方案1】：

我遇到了同样的问题。 bootstrap-table 从thead、tr、th 标签中删除类和样式。如果您还使用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>

【讨论】：

在load-success.bs.table 触发后仍然可以修改标题。相反，请考虑绑定到post-header.bs.table。

【解决方案2】：

而不是data-classes属性，如果你只使用class，问题在firefox、chrome和ie7+上都解决了。

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

【讨论】：

【解决方案3】：

检查：

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

【讨论】：

我还必须添加选择器。前#compTable thead tr, th{ background-color: #e9f9ee !important; }