Korzystając z tabel TABLE, początkujący w produkcji HTML napotkają, jak zmienić grubość krawędzi, ponieważ domyślne ustawienie krawędzi w TABLE jest bardzo grube, nawet jeśli wynosi 1px. Dlatego istnieją inne metody tworzenia cienkich linii i oto metoda wykorzystania CSS do implementacji cienkich linii, która jest bardzo skuteczna i kompatybilna ze wszystkimi przeglądarkami.
Jeśli po prostu ustawisz ramkę dla cienkiej tabeli liniowej, trudno jest zapewnić kompatybilność przeglądarki. Powszechną praktyką jest wykorzystanie zasady "border-collapse:collapse" z CSS2; granice tabeli łączenia atrybutów; I ustaw lewą i górną ramkę dla elementów tabeli oraz prawą i dolną ramkę dla elementów th i td.
HTML:
<table> <tr> <th>Głowa tabeli (wiersz 1, słupek 1)</th> <th>głowa tabeli (wiersz 1, słupek 2)</th> <th>głowa tabeli (wiersz 1, słupek 3)</th> </tr> <tr> <td>dane tabeli (wiersz 1, słupek 1)</td> <td>Dane tabelowe (wiersz 1, słupek 2)</td> <td>dane tabelowe (wiersz 1, słupek 3)</td> </tr> <tr> <td>dane tabelowe (wiersz 2, słupek 1)</td> <td>dane tabelowe (wiersz 2, słupek 2)</td> <td>Dane tabelowe (wiersz 2, słupek 3)</td> </tr> CSS</table>:
table{border-collapse:collapse; odstępy między granicami:0; Lewa ramka: 1px stały #888; Border-top: 1px solid #888; tło: #efefef; } th,td{border-right:1px solid #888; Spód ramki: 1px solidny #888; wypełnienie: 5px 15px; } th{font-weight:bold; tło: #ccc; } |