Formattare le tabelle con i CSS cellspacing e cellpadding – nuove classi per bootstrap

In Html 5.0 gli attributi delle tabelle cellspacing e cellpadding non sono attributi validi e devono essere sostituti con l’utilizzo dei CSS.

  • cellpadding definisce il padding di una cella della tabella: la distanza tra il contenuto della cella e il suo perimetro.
  • cellspacing  definisce la distanza tra le celle di una tabella.  

cellpadding

per replicare l’effetto di cellpadding si deve impostare il padding delle celle quindi:

table td {
    padding: 2px;
}

poichè una tabella  può avere un header e un footer meglio includere anche questi elementi nella definizione di stile

table th, table td, table tf {
     padding: 2px;
 }

cellspacing

in css la proprietà border-collapse consente di replicare cellspacing due i valori possibili separate e collapse.

per eleminare le distanze tra le celle

table {     
      border-collapse: collapse;
 }

Per inserire una distanza in pixel usare il valore separate e impostare la proprietà border-spacing

table {
      border-collapse: separate;
      border-spacing: 5px;
 }

Bootstrap e le tabelle

Bootstrap per le tabelle definisce alcune classi che consentono una buona formattazione delle tabelle  stesse

  • table-responsive
  • table-condensed
  • table-bordered
  • table-striped

Considerato che bootstrap per condensed utilizza un padding di 5px è preferibile invece che cambiare  il valore di padding definire una nuova classe da posizionare in un foglio di style accessorio con un padding più contenuto anche di soli 0px.

.table-xcondensed > thead > tr > th,
.table-xcondensed > tbody > tr > th,
.table-xcondensed > tfoot > tr > th,
.table-xcondensed > thead > tr > td,
.table-xcondensed > tbody > tr > td,
.table-xcondensed > tfoot > tr > td {
    padding: 2px!important;
}

Con riferimento alle tabelle usando bottstrap può far comodo disporre anche di una classe table-bordless per  eliminare completamente i bordi di una tabella

table.table-borderless td, table.table-borderless th {
    border: none!important;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none!important;
}

 

 

Risorse:

 

 

 

Annunci