twitter-bootstrap => tabelle

Osservazioni

Ordine dei contenuti e tabelle complesse Fate attenzione che lo stile di ridimensionamento della tabella cambia l'ordine visivo del contenuto. Assicurati di applicare questo stile solo a tabelle di dati ben formate e semplici (e in particolare, non utilizzarle per tabelle di layout) con le celle di intestazione di tabella appropriate per ogni riga e colonna.

Inoltre, questa classe non funzionerà correttamente per le tabelle con celle che si estendono su più righe o colonne (utilizzando gli attributi rowspan o colspan).

Tavolo di base

Bootstrap definisce uno stile personalizzato per la tabella utilizzando la classe .table . Basta aggiungere la classe .table a qualsiasi <table> per vedere i divisori orizzontali e il riempimento:

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Tavolo con stile avanzato

Bootstrap fornisce un paio di classi per lo stile di tabella avanzato.

Righe a righe

Avrai una tabella con righe a strisce, se aggiungi la classe .table-striped :

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Nota che:

Le tabelle a strisce sono progettate tramite il selettore CSS :nth-child , che non è disponibile in Internet Explorer 8.

Tavolo bordato

Avrai una tabella con bordi su tutti i lati del tavolo e delle celle, se aggiungi la classe .table-bordered :

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Passa il mouse sulle righe

Se aggiungi la classe .table-hover , avrai una tabella con righe evidenziate quando l'utente si posiziona su una riga:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Tavolo condensato

Se aggiungi la classe .table-condensed , il riempimento della cella predefinito verrà dimezzato, quindi avrai una tabella più compatta:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Classi contestuali

Le tabelle Bootstrap supportano i colori contestuali. Per cambiare il colore di sfondo di una riga o di una cella è sufficiente aggiungere una delle seguenti classi contex: .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

Tavoli reattivi

Devi racchiudere qualsiasi .table nel contenitore html con la classe .table-responsive per creare tabelle reattive:

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

Le tabelle reattive scorreranno orizzontalmente su dispositivi di piccole dimensioni (<768px). Non ci saranno differenze per gli schermi più grandi di 768 px.

Reflow tabella: intestazioni verticali

Ottenere un tavolo con intestazioni verticali.

Il bootstrap di Twitter ora supporta l'intestazione verticale su una tabella normale ben formattata. Per ottenere ciò basta usare la classe .table-reflow

Usa la classe .table-reflow bootstrap di twitter su una tabella ben formata per ottenere una tabella con intestazioni verticali. Inoltre è possibile combinare con l'uso di .table-striped e .table-hover per il .table-hover del mouse sulle colonne questa volta.

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

Dovresti controllare i documenti alpha v4 qui: twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

twitter-bootstrap
tabelle

Ricerca…