In ambiente di test a volte si inseriscono testi fittizi ance con parole molto lunghe, incontrando a volte errori di visualizzazione con queste parole che escono dai box di contenuto incidendo sulla impaginazione generale; per risolvere questo difetto per precauzione inseriamo la seguente regola per spezzare le parole a livello lettera in modo che vadano a capo:

word-wrap: break-word;

Link WebDesignerWall

quando incontro certe necessità cerco di condividerle, nel caso di un elemento con “position:” che sia relative o absolute o che…non avendo possibilità di editare o eliminare questa regola, potendola solo sovrascrivere possiamo annullare la posizione resettandola di default con questa regola:

position:static;

Link W3 school…

na particolare regola CSS che permette di visualizzare dei box DIV con disposizione tabellare, probabilmente la soluzione definitiva per rimpiazzare le tabelle TABLE; senza un particolare posizionamento grazie alle varie regole display:table— le div con questa proprietà assumono automaticamente una disposizione tabellare…

La regola display table si divide in 8 differenti regole come table-row, table-column, table-header ecc…
Questo link su w3School approfondisce la regola display.

Mah…con piccole prove si può velocemente testare la regola e notare quanto sia più versatile e stabile di una TABLE, eppure sarebbe troppo bello rimpiazzare definitivamente le tabelle; infatti display:table non è supportato da IE fino alla versione 7, il supporto è stato poi introdotto dalla versione 8, per safari e firefox nessun problema (ecco la pagina che evidenzia il supporto cross-browser della regola).

Vediamo un esempio di codice:

<div class=”riga”>
<div class=”colonna”></div>
<div class=”colonna”></div>
<div class=”colonna”></div>
</div>
<div class=”riga”>
<div class=”colonna”></div>
<div class=”colonna”></div>
<div class=”colonna”></div>
</div>

.riga {width:300px;height:auto;display:table-row;}
.colonna{width:100px;height:40px;display:table-column;}

In questo caso visualizzeremo una tabella formata da 2 righe e 3 colonne per un totale di 6 celle.