Archief - Layout table lukt niet goed

Site: www.9livesracingleague.be

Op de hompage onderaan heb je 4 boxen,
F1 Last results, GP2 last results, F1 ranking en GP2 ranking.

F1 ranking en GP2 ranking geeft de tabel weer zoals het oorspronkelijk is.
Zoals je kan zien neemt die tabel niet de volledig breedte die hij heeft.

in Last results heb ik dan width: 100% bijgevoegd.
Daarvan zie je dus het resultaat dat de eerste kolom gigantisch breed wordt gemaakt en de andere kolommen samen geperst dat het zelfs niet meer op één lijn kan.

Als ik op:
http://www.9livesracingleague.be/competitionsall/f1-championship

ook width 100% toevoeg krijg ik juist het zelfste probleem.

Hoe komt dit? Hoe kan ik dit fixen?

Ksnap het probleem niet. Hier ziet het er goed uit

Mss eens print screen nemen van het probleem?

Ik zie het ook niet, misschien uw cache eens clearen?

Ik ben niet zeker of ik het juiste voor heb.

Bedoel je dat de 2 rechtse tabellen in de footer niet de volledige breedte opnemen? Indien dit het gene is wat je bedoelt moet je:

nemen ipv

http://i49.tinypic.com/dwwgu0.jpg

een afbeelding,
zoals je ziet is kolom 1 daarop heel groot, en een nickname in kolom 2 kan dan niet eens meer op één rij

ik wil dat de tabel de volledig breedte inneemt die hij kan maar dat de kolommen wel goed verdeeld zijn

misschien zo:

dask zei:

misschien zo:

Code:

<table>
<col style="width:15%">
<col style="width:60%">
<col style="width:25%">
<thead>
...

Klik om te vergroten...

zou er geen oplossing zijn via css? Omdat dit een script is en ik daar niet zomaar kan in tussenkomen?

Normaal gezien gaan tables in HTML zelf proper de ruimte gaan verdelen volgens wat beschikbaar is, de witruimte zal dus mooi verdeeld worden naargelang de breedte van de inhoud (inclusief header cells!). Dan mag je al die styling waar je breedtes instelt laten vallen. Styling op colgroups is trouwens behoorlijk onbetrouwbaar, je bent voor crossbrowser beter van op je <th> en <td> te gaan stylen.

Als je wil verhinderen dat de inhoud van een cel in het midden gesplitst wordt, dan kan je in je css hetvolgende doen:


CSS white-space property

Resultaat (met table width 100% en nowrap):


Als je wil dat alle kolommen dezelfde breedte hebben, dan kan je dat via een truukje doen:


Zoals ik hierboven al in de commentaar bij de CSS vermeld heb kan je bij tables niet echt op exacte wetenschap rekenen. Ze worden ook als één grote blok door de CSS parser van je browser gejaagd en dan pas gerenderd. Dat maakt ze (in vergelijking met andere rendering) traag en expensive. Gebruik ze dus enkel voor tabeldata (wat hier dus wel het geval is, maar ik geef het toch even mee).

Een andere optie om te zorgen dat dashes niet splitsen naar een volgende lijn is ze bij het renderen van de pagina te vervangen door een non-breaking hyphen (&#8209.

(neem spaties weg uit bovenstaande, maar anders rendert het verkeerd op forum)

Ik zeg dit omdat white-space nowrap als de inhoud echt heel lang wordt ervoor zal zorgen dat de table soms uit z'n 100% boundaries gaat breken en je dus een table krijgt die de rest uit de weg duwt. Volgens mij gebeurt dat enkel als je op alle <td>s die css property zet, maar best eens checken!

daar kan ik al iets mee doen.
tnx!