Når man bruker TABLE-tabeller, vil nybegynnere i HTML-produksjon møte hvordan man kan endre kanttykkelsen, fordi standard TABLE-kantinnstillingen er veldig tykk selv om den er 1px. Derfor finnes det andre metoder som brukes for å lage tynne linjekanter, og her er en metode for å bruke CSS for å implementere tynne linjer, som er svært effektiv og kompatibel med alle nettlesere.
Hvis du bare setter rammen for en tynn linjetabell, er det vanskelig å sikre at nettleseren er kompatibel. En vanlig praksis er å bruke CSS2s "border-collapse:collapse;" tabellgrenser for sammenslåing av attributter; Og sett venstre og øverste kanter for tabellelementer, og høyre og nedre kanter for th- og td-elementer.
HTML:
<table> <tr> <th>Tabellhode (rad1, kol1)</th> <th>Tabellhode (rad1, kol2)</th> <th>Tabellhode (rad1, kol3)</th> </tr> <tr> <td>Tabelldata (rad1, kol1)</td> <td>Tabelldata (Rad1, Kol2)</td> <td>Tabelldata (Rad1, Kol3)</td> </tr> <tr> <td>Tabelldata (Rad2, Kol1)</td> <td>Tabelldata (Rad2, Kol2)</td> <td>Tabelldata (rad2, kol3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; grenseavstand: 0; border-left:1px solid #888; border-top: 1px solid #888; Bakgrunn: #efefef; }
th,td{border-right:1px solid #888; Border-bottom: 1px solid #888; polstring: 5px 15px; }
th{font-weight:bold; Bakgrunn: #ccc; } |
Publisert på 18.04.2015 22:19:21
|
|
|
|
Publisert på 15.07.2015 01:06:57
|
Vert|
Publisert på 11.03.2021 10:51:40
|
Sjekk ut støtten
