Stilizzare una tabella HTML usando le classi CSS di Bootstrap

di Stefano Mostarda, in HTML5, CSS3, Boostrap,

Bootstrap mette a disposizione delle classi CSS per personalizzare le tabelle HTML. La classe principale da applicare al tag table è table. Questa classe contiene gli stili per renderizzare solo le linee orizzontali e assegnare un padding molto tra le celle.

<table class="table">
  <!-- code -->
</table>

Se vogliamo ridurre il padding tra le celle per far apparire la tabella meno grande, dobbiamo aggiungere la classe table-condensed.

<table class="table table-condensed">
  <!-- code -->
</table>

Per visualizzare tutti i bordi della tabella, dobbiamo invece aggiungere la classe table-bordered.

<table class="table table-bordered">
  <!-- code -->
</table>

Tra le altre opzioni c'è anche la possibilità di alternare il colore dello sfondo delle righe semplicemente aggiungendo la classe table-striped.

<table class="table table-striped">
  <!-- code -->
</table>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi