CSS: table in div

Door Bo az op 17-12-2005 14:56

2.508 views

Ik heb een div met daarin een table.

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?

Jan Koehoorn

17-12-2005 15:00 gewijzigd op 17-12-2005 15:02

Hoi Boaz,

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%

Bo az

17-12-2005 15:10

Ik gebruik geen nowrap, maar de table is nog steeds te breed, ik heb ook liever niet dat deze smaller wordt, maar liever dat de div breder wordt.

Het voorbeeld is ook bijgewerkt met jou code

Jan Koehoorn

17-12-2005 15:17 gewijzigd op 17-12-2005 15:22

Ik snap het. Je hebt zoveel <td>'s naast elkaar dat de tabel rechts van de pagina afloopt. Dan rekt een div niet automatisch mee.

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.

Bo az

17-12-2005 15:34

Werkt idd!

Dankje!

Hoe weet jy zulke dingen door internet of uit een boek?

Jan Koehoorn

17-12-2005 15:54

Ja, combinatie. Ik heb een behoorlijke bibliotheek intussen en veel sites over CSS bekeken. Heel veel dingen weet ik niet onmiddellijk, maar ik heb wel vaak snel een idee in welke richting ik moet zoeken.

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.

Reageren

Inloggen om te reageren