Wie kann ich Stil für Header Wenzhixin Bootstrap-Tabelle ändern?

Question

Ich versuche Header-Stil eine Tabelle mit Wenzhixin Bootstrap-Tabelle ändern. Klasse = "info" funktioniert nicht. gibt es einen Code:

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

Bitte helfen. Wie kann ich den Style für Header-Bootstrap-Tabelle ändern?

P.S. wenn die Verwendung Bootstrap ohne wenzhixin Bootstrap-Tabelle, dann funktioniert alles, aber für mich ist es notwendig, wenzhixin Bootstrap-Tabelle

Answer 1

Anstelle des data-classes Attribut, wenn Sie class verwenden, wird das Problem auf Firefox gelöst, Chrom und IE7 +.

Grüße, hoffe es löst Ihr Problem.

Answer 2

prüfen mit:

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

Answer 3

ich hatte das gleiche Problem. bootstrap-table entfernt die Klassen und Stile aus den Tags thead, tr, th. Dies ist mehr als frustrierend, wenn Sie auch stickyTableHeaders verwenden (der Hintergrund ist nicht weiß, sondern transparent). bootstrap-table bietet ein load-success Ereignis, das ausgelöst wird, nachdem die Tabelle gerendert wurde. Sie können damit die Klasse/den Stil nachträglich an Ihre Tabelle anhängen. Beachten Sie, dass Ihre Tabelle ein muss id

$('#myTable').on('load-success.bs.table', function (e, data) { 
    $('#myTable').stickyTableHeaders(); 
    $('#myTable thead tr').css('background','white'); 
}); 

So Ihre Schnipsel zu vervollständigen, so etwas wie dies funktionieren sollte:

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