Quando si usano le tabelle TABLE, i principianti nella produzione HTML si imbatteranno su come modificare lo spessore dei bordi, perché l'impostazione predefinita del bordo TABLE è molto spessa anche se è 1px. Pertanto, esistono altri metodi utilizzati per creare bordi a linea sottile, e qui c'è un metodo per utilizzare il CSS per implementare linee sottili, molto efficace e compatibile con tutti i browser.
Se semplicemente imposti il bordo per una tabella a linee sottili, è difficile assicurarsi che il browser sia compatibile. Una pratica comune è utilizzare il "collasso del confine:collasso" di CSS2; i bordi della tabella di fusione degli attributi; E imposta i bordi sinistro e superiore per gli elementi della tabella, e i bordi destro e inferiore per gli elementi th e td.
HTML:
<table> <tr> <th>Testa tabella (Riga 1, Col1)</th> <th>Testa Tabella (Riga 1, Col2) Testa</th> <th>Tabella (Riga 1, Col3)</th> </tr> <tr> <td>Dati della tabella (Riga 1, Col1)</td> <td>Dati di tabella (riga1, col2) dati</td> <td>di tabelle (riga1, col3)</td> </tr> <tr> <td>dati di tabelle (riga2, col1)</td> <td>dati di tabelle (riga2, col2)</td> <td>Dati della tabella (Row2, Col3)</td> </tr> CSS</table>:
tabella{collasso del bordo:collasso; spaziatura dei bordi: 0; bordo sinistro: 1px solido #888; bordo superiore: 1px solido #888; Contesto:#efefef; } th,td{border-right:1px solido #888; bordo inferiore: 1px solido #888; imbottitura: 5px 15px; } th{font-weight:grassetto; Contesto:#ccc; } |