1

我正在尝试使用 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 bootstrap-table的情况下使用bootstrap，那么一切正常，但对我来说，wenzhixin bootstrap-table是必要的

4

3 回答 3

1

我遇到过同样的问题。从, ,标记bootstrap-table中删除类和样式。如果您还使用stickyTableHeaders（背景不是白色而是透明的），那就更令人沮丧了。 提供一个事件，该事件在表格呈现后触发。之后您可以使用它来将类/样式附加到您的表中。请注意，您的餐桌需要theadtrthbootstrap-tableload-successid

$('#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>
于 2018-03-02T09:33:26.893 回答
0

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

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

于 2016-03-24T06:10:04.090 回答
0

检查：

<style>
       #tableID thead tr{
          background-color: #0361cc; color:white;
       }
</style>
于 2017-09-14T20:33:01.670 回答