CSS: table in div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bo az

Bo az

17/12/2005 14:56:00
Quote Anchor link
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?
 
PHP hulp

PHP hulp

29/03/2024 13:38:53
 
Jan Koehoorn

Jan Koehoorn

17/12/2005 15:00:00
Quote Anchor link
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%
Gewijzigd op 17/12/2005 15:02:00 door Jan Koehoorn
 
Bo az

Bo az

17/12/2005 15:10:00
Quote Anchor link
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

Jan Koehoorn

17/12/2005 15:17:00
Quote Anchor link
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.
Gewijzigd op 17/12/2005 15:22:00 door Jan Koehoorn
 
Bo az

Bo az

17/12/2005 15:34:00
Quote Anchor link
Werkt idd!

Dankje!

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

Jan Koehoorn

17/12/2005 15:54:00
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.