Question

我正在尝试使用wenzhixin bootstrap-table更改标题样式.But class =＆＃34; info＆＃34;不起作用。有一个代码：

＆＃13;

<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>

＆＃13;

请帮忙。如何更改标头bootstrap-table的样式？

P.S。如果使用bootstrap而没有wenzhixin bootstrap-table，那么一切正常，但对我来说这是必要的wenzhixin bootstrap-table

Answer 1

如果仅使用data-classes，则代替class属性，问题在firefox，chrome和ie7 +上得到解决。

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

Answer 2

检查：

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

Answer 3

我有同样的问题。 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>

如何更改标题文志新bootstrap-table的样式？

3 个答案: