Pri používaní TABLE tabuliek sa začiatočníci v HTML produkcii stretnú s tým, ako zmeniť hrúbku hrán, pretože predvolené nastavenie hrán v TABLE je veľmi hrubé, aj keď je 1px. Preto existujú aj iné metódy na vytváranie tenkých čiar a tu je metóda použitia CSS na implementáciu tenkých čiar, ktorá je veľmi efektívna a kompatibilná so všetkými prehliadačmi.
Ak jednoducho nastavíte okraj pre tabuľku tenkých čiar, je ťažké zabezpečiť, či je prehliadač kompatibilný. Bežnou praxou je využívať CSS2 "border-collapse:collapse;" hranice tabuľky zlučovania atribútov; A nastavte ľavý a horný okraj pre prvky tabuľky a pravý a dolný okraj pre prvky th a td.
HTML:
<table> <tr> <th>Hlava tabuľky (riadok 1, stĺpec 1)</th> <th>hlava tabuľky (riadok 1, stĺpec 2)</th> <th>hlava tabuľky (riadok 1, stĺpec 3)</th> </tr> <tr> <td>dáta tabuľky (riadok 1, stĺpec 1)</td> <td>Dáta tabuľky (riadok 1, stĺpec 2)</td> <td>dáta tabuľky (riadok 1, stĺpec 3)</td> </tr> <tr> <td>dáta tabuľky (riadok 2, stĺpec 1)</td> <td>dáta tabuľky (riadok 2, stĺpec 2)</td> <td>Tabuľkové údaje (riadok 2, stĺpec 3)</td> </tr> CSS</table>:
table{border-collapse:collapse; rozostupy medzi hranicami:0; Okraj vľavo: 1 px pevný #888; okrajový vrch: 1px pevný #888; Pozadie: #efefef; } th,td{border-right:1px solid #888; spodný okraj: 1px pevný #888; výplň: 5px 15px; } th{font-weight:bold; Pozadie: #ccc; } |