TABLE táblázatokat használva a kezdők HTML gyártásban tapasztalnak, hogyan lehet változtatni az élvastagságon, mert az alapértelmezett TABLE élbeállítás nagyon vastag, még ha 1px is van. Ezért vannak más módszerek is vékony vonalak létrehozására, és itt van egy módszer a CSS segítségével vékony vonalak megvalósítására, ami nagyon hatékony és kompatibilis minden böngészővel.
Ha egyszerűen beállítod a keretet egy vékony vonalas táblázathoz, nehéz biztosítani, hogy a böngésző kompatibilis-e. Egy gyakori gyakorlat a CSS2 "border-collapse:collapse" (border-collapse:collapse) módszerének használata; attribútumegyesítés táblahatára; A bal és felső szegélyt a táblázat elemeinek, a jobb és alsó szegélyeket pedig a th és td elemeknek állítsd be.
HTML:
<table> <tr> <th>Táblafej (1. sor, 1. osztály) Táblázatfej</th> <th>(1. sor, 2. sor)</th> <th>Táblázatfej (1. sor, 3. osztály)</th> </tr> <tr> <td>Táblázat adatai (1. sor, 1. kolon)</td> <td>Tábla adatok (1. sor, 2. sor)</td> <td>táblázatadatok (1. sor, 3. sor)</td> </tr> <tr> <td>táblázatadatok (2. sor, 1. sor</td>) <td>táblázat adatai (2. sor, 2. sor)</td> <td>Táblaadatok (sor2, col3)</td> </tr> CSS</table>:
table{border-collapse:collapse; szegélytávolság:0; bal szegély:1PX szilárd #888; border-top: 1px szilárd #888; Háttér:#efefef; } th,td{border-right:1px szilárd #888; border-bottom: 1px szilárd #888; tömés: 5px 15px; } th{font-weight:bold; Háttér:#ccc; } |