Archief - Layout table lukt niet goed

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

CoBalT

Legacy Member
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?

KingOfWoods

Legacy Member
Ksnap het probleem niet. Hier ziet het er goed uit :s

Mss eens print screen nemen van het probleem?

Dieterg

Legacy Member
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:
Code:
table { width: 100%; }

nemen ipv
Code:
table {max-width: 100%; }

CoBalT

Legacy Member
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

dask

Legacy Member
misschien zo:
Code:
<table>
<col style="width:15%">
<col style="width:60%">
<col style="width:25%">
<thead>
...

CoBalT

Legacy Member
dask zei:
misschien zo:
Code:
<table>
<col style="width:15%">
<col style="width:60%">
<col style="width:25%">
<thead>
...

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

bealzebub

Legacy Member
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:

Code:
table td:nth-child(2) {
  white-space: nowrap;
}

CSS white-space property

Resultaat (met table width 100% en nowrap):
35a3q02.png


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

Code:
table {
  table-layout: fixed;
  width: 100%; // Of iets anders
}

td {
  width: 2%; // Kleine waarde, tabellen houden toch niet exact rekening met procentuele waarden
}

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).

bealzebub

Legacy Member
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;).

Code:
& # 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!

CoBalT

Legacy Member
Code:
table td:nth-child(2) {
  white-space: nowrap;
}

daar kan ik al iets mee doen.
tnx!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan