CSS: table in div
De div wordt netjes zo breed als de hele pagina, maar de table die er in staat is breder en veroorzaakt een horizontale scroll bar.
Ik zou graag willen dat de div om de hele table (dus ook in de breedte) staat.
uiteraard hangt het er vanaf met welke browser je kijkt:
In FF en Opera is het probleem er wel, maar in IE niet.
Voorbeeld: www.n3rd.nl/shit/adres_test.html
Nog een andere vraag, als ik meer van css en divjes en css wil leren, waar kan ik daar dan wat over vinden of bestaat er een goed boek over?
ik doe het meestal zo:
<style>
/* alle margins en paddings op 0 */
* {
margin: 0px;
padding: 0px;
}
#jouwdiv table {
width: 100%;
}
</style>
Let wel op: als je in je tabel een aantal <td>'s op <td nowrap> hebt gezet, dan kan je tabel alsnog te breed worden.
edit:
met de spatie tussen '#jouwdiv' en 'table' geef je aan dat alle tabellen in de div 'jouwdiv' een breedte van 100% krijgen. Soms moet je 99% gebruiken voor een goed resultaat. Met name Opera doet nog wel eens moeilijk over 100%
Gewijzigd op 17/12/2005 15:02:00 door Jan Koehoorn
Het voorbeeld is ook bijgewerkt met jou code
Wat je kunt doen is de div een overflow: auto; meegeven. Dan krijg je een horizontale scrollbar vlak onder je div.
Edit: schrap die laatste opmerking. Geef de div waarin de tabel zit display: table; In FireFox ziet het er dan uit zoals jij wilt.
Edit 2: Getest in IE en Opera, ziet er ook goed uit.
Gewijzigd op 17/12/2005 15:22:00 door Jan Koehoorn
Dankje!
Hoe weet jy zulke dingen door internet of uit een boek?
Een goeie blog over webdesign en CSS vind ik die van Dave Shea, de ontwerper en bedenker van csszengarden.com
Hij heeft ook een boek, sinds kort in het Nederlands vertaald: The zen of CSS design. Is geschreven van een designers-standpunt.
Ook goed vind ik www.simplebits.com. Heeft ook een boek uit: Bulletproof Webdesign
Is meer geschreven vanuit een coder-standpunt.