Όταν χρησιμοποιείτε πίνακες TABLE, οι αρχάριοι στην παραγωγή HTML θα συναντήσουν πώς να αλλάξουν το πάχος των άκρων, επειδή η προεπιλεγμένη ρύθμιση άκρων TABLE είναι πολύ παχιά ακόμα κι αν είναι 1 εικονοστοιχείο. Επομένως, υπάρχουν και άλλες μέθοδοι που χρησιμοποιούνται για τη δημιουργία περιγραμμάτων λεπτών γραμμών και εδώ είναι μια μέθοδος χρήσης CSS για την εφαρμογή λεπτών γραμμών, η οποία είναι πολύ αποτελεσματική και συμβατή με όλα τα προγράμματα περιήγησης.
Εάν ορίσετε απλώς το περίγραμμα για έναν πίνακα λεπτών γραμμών, είναι δύσκολο να διασφαλίσετε ότι το πρόγραμμα περιήγησης είναι συμβατό. Μια κοινή πρακτική είναι να χρησιμοποιείται το "border-collapse:collapse" του CSS2. Περιγράμματα πίνακα συγχώνευσης χαρακτηριστικών. Και ορίστε το αριστερό και το επάνω περίγραμμα για τα στοιχεία του πίνακα και το δεξί και το κάτω περίγραμμα για τα στοιχεία th και td.
HTML:
<table> <tr> <th>Κεφαλή πίνακα (σειρά 1, στήλη 1)</th> <th>Κεφαλή πίνακα (σειρά 1, στήλη 2)</th> <th>Κεφαλή πίνακα (σειρά 1, στήλη 3)</th> </tr> <tr> <td>Δεδομένα πίνακα (σειρά 1, στήλη 1)</td> <td>Δεδομένα πίνακα (σειρά 1, στήλη 2)</td> <td>Δεδομένα πίνακα (σειρά 1, στήλη 3)</td> </tr> <tr> <td>Δεδομένα πίνακα (σειρά 2, στήλη 1)</td> <td>Δεδομένα πίνακα (σειρά 2, στήλη 2)</td> <td>Δεδομένα πίνακα (σειρά 2, στήλη 3)</td> </tr> </table>ΚΣΣ:
table{border-collapse:collapse; απόσταση συνόρων:0; περίγραμμα-αριστερά:1px στερεό #888; περίγραμμα-κορυφή:1px στερεό #888; ιστορικό:#efefef; } th,td{border-right:1px στερεό #888; περίγραμμα-κάτω: 1px στερεό #888; επένδυση: 5 εικονοστοιχεία 15 εικονοστοιχεία; } th{font-weight:bold; ιστορικό:#ccc; } |