Kolommen even breed in table
Ik heb een tabel met een variable aantal kolommen. Nu wil ik dat elke kolom even breed is.
Ik heb al deze css
Code (php)
1
2
2
table-layout: fixed;
width:100%;
width:100%;
Echter als er maar een paar kolommen zijn minder dan 100% dan mogen ze niet alle ruimte in gebruik nemen, maar moeten toch even groot zijn.
Als ik de width:100% weg doe dan zijn niet alle kolommen gelijk en is de ruimte meer dan 100% bij ±5 kolommen of meer
Hoe los ik dit op?
Jan
Als je meerdere kolommen hebt kun je deze natuurlijk niet allemaal 100% geven en dat idee krijg ik nou dat jij dat wel doet.
Je hele table is 100% dus als je 5 kolommen hebt geef je deze alle 5 20%
Code (php)
1
2
2
table {table-layout:fixed;witdh:100%;}
th,td {width: 20%;}
th,td {width: 20%;}
Ik weet wel dat 5X20%=100% maar dat lukt dus niet in css omdat 3 kolommen <100% en 8 kolommen>100% is
Momenteel heb ik 9 kolommen.
Ook met max-width:100% lukt het niet
poging met
Code (php)
1
2
3
2
3
table-layout: fixed;
max-width:100%;
width:50%;
max-width:100%;
width:50%;
Een voorbeeldje :)
Nu ziet het er goed uit maar met weinig kolommen zijn ze te breed. 5=ok, 4 of minder is te breed, 1 is niet om aan te zien
Gewijzigd op 31/01/2014 10:17:43 door Jan R
edit: update met jou titels. Hier blijft de kolom in zn goede vorm hoor.
Gewijzigd op 31/01/2014 10:27:10 door Michael -
ik heb deze link terug
http://jsfiddle.net/KdK6L/4/#&togetherjs=P3IiOnwQhi
werkt dit zo?
Toevoeging op 31/01/2014 10:33:43:
Ja maar niet als er minder kolommen zijn.
Jan R op 31/01/2014 10:30:33:
Hoe moet ik deze updaten?
ik heb deze link terug
http://jsfiddle.net/KdK6L/4/#&togetherjs=P3IiOnwQhi
werkt dit zo?
Toevoeging op 31/01/2014 10:33:43:
Ja maar niet als er minder kolommen zijn.
ik heb deze link terug
http://jsfiddle.net/KdK6L/4/#&togetherjs=P3IiOnwQhi
werkt dit zo?
Toevoeging op 31/01/2014 10:33:43:
Ja maar niet als er minder kolommen zijn.
Ja dat is toch logisch. Dan moet je je afvragen waarom je met % werkt en niet met vaste waardes. Natuurlijk past ie zich aan naarmate je kolommen gaat weg halen en toevoegen.
Geef de table dan geen width en geef de th,td een vaste width van 100px o.i.d.
edit vaste waardes
Gewijzigd op 31/01/2014 10:40:15 door Michael -
Vermoedelijk wil ik een beetje te veel :)
Toch zeer wel bedankt voor de tussenkomst. Mocht je toch nog ideeën hebben laat maar weten.
Jan
Maar je wil niet dat je hele table buiten beeld komt te vallen?
Wat je nog kan doen; als je met vaste waardes werkt kun je met PHP mee rekenen hoeveel kolommen je hebt. Dan moet je wel van een vaste breedte uitgaan, bijv 900px. Als je kolommen dan 100px zijn tel je het aantal kolommen, meer dan 9 dan wil je een bepaalde actie doen.
Wat die actie is, is me dan nog niet duidelijk, want je wilt je kolommen niet aanpassen (dit doet ie automatisch al)... Dus je zou ze bijv naar onderen kunnen halen.
Gewijzigd op 31/01/2014 10:53:44 door Michael -
Michael - op 31/01/2014 10:52:33:
In de eerste plaats wil je dus dat je kolommen altijd even breed zijn, een vaste waarde dus.
Als ik TS goed begrijp moet elke kolom even breed zijn en die breedte is afhankelijk van het aantal kolommen. Bij 3 kolommen elk 33,3%, bij 5 kolommen elk 20%, etc.
Waar TS, vermoedelijk, tegenaan loopt is het probleem met getallen na de komma.
Obelix en Idefix op 31/01/2014 11:52:58:
Als ik TS goed begrijp moet elke kolom even breed zijn en die breedte is afhankelijk van het aantal kolommen. Bij 3 kolommen elk 33,3%, bij 5 kolommen elk 20%, etc.
Waar TS, vermoedelijk, tegenaan loopt is het probleem met getallen na de komma.
Michael - op 31/01/2014 10:52:33:
In de eerste plaats wil je dus dat je kolommen altijd even breed zijn, een vaste waarde dus.
Als ik TS goed begrijp moet elke kolom even breed zijn en die breedte is afhankelijk van het aantal kolommen. Bij 3 kolommen elk 33,3%, bij 5 kolommen elk 20%, etc.
Waar TS, vermoedelijk, tegenaan loopt is het probleem met getallen na de komma.
TS:
Echter als er maar een paar kolommen zijn minder dan 100% dan mogen ze niet alle ruimte in gebruik nemen, maar moeten toch even groot zijn.
Als ik de width:100% weg doe dan zijn niet alle kolommen gelijk en is de ruimte meer dan 100% bij ±5 kolommen of meer
Als ik de width:100% weg doe dan zijn niet alle kolommen gelijk en is de ruimte meer dan 100% bij ±5 kolommen of meer
Gewijzigd op 31/01/2014 12:06:13 door Michael -
Code (php)
1
2
2
table.nextrounds {table-layout:fixed}
table.nextrounds th,table.nextrounds td{border:1px solid #ccc;width:220px;min-width:220px}
table.nextrounds th,table.nextrounds td{border:1px solid #ccc;width:220px;min-width:220px}
Bij weinig kolommen is het dan ok. Bij meer kolommen, wat minder voorkomt, iets minder.
Toch bedankt om mee te denken.
ps: PHP is geen optie. De html komt uit een programma enkel de css js en vbs bestanden zijn aanpasbaar. vbs is ook niet ok want niet ondersteunt door alle browsers.
Jan
Gewijzigd op 31/01/2014 13:26:22 door Jan R