我试图用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-table的样式?
附:如果使用bootstrap而没有wenzhixin bootstrap-table,那么一切正常,但对我来说这是必要的wenzhixin bootstrap-table
而不是data-classes
属性,如果你只使用class
,问题是在firefox,chrome和ie7 +上解决的。
问候,希望它能解决你的问题。
检查:
<style>
#tableID thead tr{
background-color: #0361cc; color:white;
}
</style>
我遇到过同样的问题。 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>