Как я могу изменить стиль для заголовка 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 если использовать bootstrap без wenzhixin bootstrap-таблицы, то все работает, но мне нужен wenzhixin bootstrap-table

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

Answer 2

Проверить с:

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

Answer 3

Вместо data-classes атрибут, если вы используете только class, проблема решена на Firefox, Chrome и ie7+.

С уважением, надеюсь, что это решит вашу проблему.