Bij het gebruik van TABLE-tabellen zullen beginners in HTML-productie tegenkomen hoe ze de randdikte kunnen veranderen, omdat de standaard TABLE-randinstelling erg dik is, zelfs als die 1px is. Daarom zijn er ook andere methoden om dunne lijnen te maken, en hier is een methode om met CSS dunne lijnen te implementeren, die zeer effectief is en compatibel met alle browsers.
Als je simpelweg de rand voor een dunne lijn tabel zet, is het moeilijk om te garanderen dat de browser compatibel is. Een gangbare praktijk is het gebruik van CSS2's "border-collapse:collapse;" tabelgrenzen voor attributensamenvoeging; En stel de linker- en bovenranden in voor tabelelementen, en de rechter- en onderranden voor th- en td-elementen.
HTML:
<table> <tr> <th>Tabel Hoofd (Rij1, COL1)</th> <th>Tabel Hoofd (Rij1, Col2)</th> <th>Tabel Hoofd (Rij1, Col3)</th> </tr> <tr> <td>Tabelgegevens (Rij1, Col1)</td> <td>Tabelgegevens (Rij1, Col2)</td> <td>Tabelgegevens (Rij1, Col3)</td> </tr> <tr> <td>Tabelgegevens (Rij2, Col1)</td> <td>Tabelgegevens (Rij2, Col2)</td> <td>Tabelgegevens (rij2, kol3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; grensafstand: 0; border-left:1px solide #888; border-top: 1px effen #888; Achtergrond: #efefef; }
th,td{border-right:1px solid #888; rand-onder: 1px effen #888; opvulling: 5px 15px; }
th{font-weight:bold; Achtergrond: #ccc; } |
Geplaatst op 18-04-2015 22:19:21
|
|
|
|
Geplaatst op 15-07-2015 01:06:57
|
Huisbaas|
Geplaatst op 11-03-2021 10:51:40
|
Bekijk de support
