Applicazione di stili alle tabelle con Twitter Bootstrap

Question

Qualcuno sa se è possibile applicare stili alle tabelle con Twitter Bootstrap? Riesco a vedere alcuni esempi di tabelle in alcune esercitazioni precedenti, ma non nel sito Bootstrap stesso.

Ho provato a configurarlo, ma i tavoli nella mia pagina non hanno praticamente nessuno stile applicato a loro.

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Language</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Some</td> 
      <td>One</td> 
      <td>English</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Joe</td> 
      <td>Sixpack</td> 
      <td>English</td> 
     </tr> 
    </tbody> 
</table> 

Quali classi devo applicare?

Answer 1

Bootstrap offre vari stili di tabella. Date un'occhiata a Base CSS - Tables per documentazione ed esempi.

Lo stile segue dà grandi tavoli in cerca:

<table class="table table-striped table-bordered table-condensed"> 
    ... 
</table> 

Answer 2

È inoltre possibile applicare classi TR: informazioni, l'errore, di avvertimento, o il successo.

Answer 3

Solo un altro tavolo di bell'aspetto. Ho aggiunto la classe "table hover" perché dà un bel effetto hovering.

<h3>NATO Phonetic Alphabet</h3>  
    <table class="table table-striped table-bordered table-condensed table-hover"> 
    <thead> 
    <tr> 
     <th>Letter</th> 
     <th>Phonetic Letter</th> 

    </tr> 
    </thead> 
    <tr> 
    <th>A</th> 
    <th>Alpha</th> 

    </tr> 
    <tr> 
    <td>B</td> 
    <td>Bravo</td> 

    </tr> 
    <tr> 
    <td>C</td> 
    <td>Charlie</td> 

    </tr> 

</table> 

Answer 4

I tavoli di bootstrap su Twitter possono essere disegnati e ben progettati. Puoi dare uno stile al tuo tavolo semplicemente aggiungendo alcune classi sul tuo tavolo e sarà bello. Si potrebbe usarlo nei rapporti di dati, che mostra le informazioni, ecc

È possibile utilizzare:

basic table 
Striped rows 
Bordered table 
Hover rows 
Condensed table 
Contextual classes 
Responsive tables 

righe righe Tabella:

<table class="table table-striped" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Name</th> 
    <th>Address</th> 
    <th>mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    </tbody> 
    </table> 

tavolo abbreviato:

compattazione una tabella è necessario aggiungere class class = "table table-condensed".

<table class="table table-condensed" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Sample Name</th> 
    <th>Address</th> 
    <th>Mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td colspan="3" align="center"></td> 
    </tr> 
    </tbody> 
    </table> 

Rif: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Answer 5

bootstrap prevede varie classi per la tavola

<table class="table"></table> 
<table class="table table-bordered"></table> 
<table class="table table-hover"></table> 
<table class="table table-condensed"></table> 
<table class="table table-responsive"></table> 

Answer 6

è possibile aggiungere classi contestuali ad ogni singola riga come segue:

<tr class="table-success"></tr> 
<tr class="table-error"></tr> 
<tr class="table-warning"></tr> 
<tr class="table-info"></tr> 
<tr class="table-danger"></tr> 

È anche possibile aggiungere per visualizzare i dati come sopra

È possibile impostare le dimensioni della tabella impostando le classi come table-sm e così via.

È possibile aggiungere classi personalizzate e aggiungere il proprio stile:

<table class="table"> 
    <thead style = "color:red;background-color:blue"> 
    <tr> 
     <th></th> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Asdf</td> 
     <td>qwerty</td> 
    </tr> 
    </tbody> 
</table> 

In questo modo è possibile aggiungere uno stile personalizzato. Ho mostrato lo stile in linea solo per esempio come funziona, puoi aggiungere classi e chiamarle anche nel tuo css.