TABLE-taulukoita käytettäessä HTML-tuotannon aloittelijat huomaavat, miten reunapaksuutta voi muuttaa, koska oletus TABLE-reunaasetus on hyvin paksu, vaikka se olisi 1px. Siksi on olemassa muita menetelmiä ohuiden viivojen reunojen luomiseen, ja tässä on tapa käyttää CSS:ää ohuiden viivojen toteuttamiseen, mikä on erittäin tehokas ja yhteensopiva kaikkien selainten kanssa.
Jos asetat reunan ohuelle viivalle, selaimen yhteensopivuuden varmistaminen on vaikeaa. Yleinen käytäntö on käyttää CSS2:n "border-collapse:collapse;" -menetelmää; attribuuttien yhdistämistaulukon reunat; Aseta vasen ja yläreuna taulukkoelementeille sekä oikea ja alareuna th- ja td-elementeille.
HTML:
<table> <tr> <th>Taulukon kanta (rivi1, kol1)</th> <th>Taulukon kansi (rivi1, Kol2)</th> <th>Taulukon kansi (rivi1, Kol3)</th> </tr> <tr> <td>Taulukon tiedot (rivi1, kol1)</td> <td>Taulukon tiedot (rivi1, kol2)</td> <td>taulukkotiedot (rivi1, kol3)</td> </tr> <tr> <td>taulukkotiedot (rivi2, kol1)</td> <td>taulukkotiedot (rivi2, kollegi 2)</td> <td>Taulukon tiedot (rivi 2, sarake 3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; reunaväli:0; reuna-vasen: 1px kiinteä #888; reuna-yläosa:1px kiinteä #888; Taustaa: #efefef; }
th,td{border-right:1px solid #888; reuna-ala: 1px kiinteä #888; täyte: 5px 15px; }
th{font-weight:bold; Taustaa:#ccc; } |
Julkaistu 18.4.2015 22.19.21
|
|
|
|
Julkaistu 15.7.2015 1.06.57
|
Vuokraisäntä|
Julkaistu 11.3.2021 10.51.40
|
Tutustu tukeen
