Goedemiddag,

Ik heb een opdracht gekregen om een website responsive te maken, maar de klant heeft deze website zelf in elkaar geknutseld en de site is volledig vormgegeven met tabellen... Nu is dat op zich geen probleem, table op 100% via CSS (moest wel zelf een stylesheet aanmaken want alles is vanzelfsprekend inline gestyled...) en ik ben al een heel eind.

Er zijn echter ook een aantal tabellen met 3 kolommen, waarbij in iedere kolom een lap tekst staat. Dat geeft op mobiel natuurlijk een onwerkbare situatie, daar moeten die kolommen gewoon onder elkaar worden weergegeven.

Dat krijg ik echter niet voor elkaar met de normale CSS commando's als clear: both;, display: block, width: 100%; enzovoorts. Nu heb ik erg weinig ervaring met tabellen, is daar een oplossing voor of moet ik alles gaan omzetten in divs om dat voor elkaar te krijgen?

Tabellen gebruik ik al jaren niet meer dus ik weet niet zeker of deze mogelijke oplossing je verder kan helpen maar ik post hem toch.

In je openingspost geef je aan dat je de volledige tabel een breedte hebt meegegeven. Is het een optie om de cellen (dus de kolommen in dit geval) binnen de tabel een breedte mee te geven zodat ze niet naast maar onder elkaar komen te staan?

Je moet van die tabel af. Ik moest voor de site van een vroegere klant ooit eens een vrij groot contactformulier wat je daarom normaliter juist in een tabel zou zetten, daar gebruikte ik steeds een DIV'je voor iedere regel. Daarin dan weer een DIV'je voor de eerste kolom, eentje voor de tweede kolom, etc. Dan in de CSS wat experimenteren met de breedtes van die DIV'jes en je komt een heel eind. Bij een breed scherm stonden ze per regel naast elkaar, en bij een smaller scherm stonden ze per regel onder elkaar. Op zich helemaal geen rocket science. Ik zal de URL ff opzoeken en je die per URL doorsturen.

Oh dat hoef je niet op te zoeken hoor Bas, ik heb er nu gewoon divjes van gemaakt en dat werkt prima. Maar de site heeft nog 300 pagina's die ik dan allemaal met de hand moet gaan aanpassen.

Nu vind ik dat niet zo erg (uurtje factuurtje) maar het zou lullig zijn als er ook een manier is waarop het met een regeltje CSS kan ;-) Zo ben ik dan ook wel weer hahaha

@ M. Zanden, jij ook bedankt voor je reactie maar zoals ik al zei heb ik al diverse technieken geprobeerd die bij divs prima werken, maar bij tabellen dus niet helaas.

Je hebt al een PB. Je hebt vast wel eens van "zoek en vervang" gehoord, toch? Eerst de cellen een markering als "ik hoor bij kolom 1" etc meegeven, daarna kun je heel snel alles vervangen.

Ja daar heb ik van gehoord, zo heb ik de link naar de stylesheet en de responsive adsense code al op alle pagina's toegevoegd. Maar bij die tabellen is dat geen handige optie in dit geval.

Dankzij een linkje dat ik van Bas kreeg toch nog opgelost! {display: block;} werkt wel degelijk, maar dan moet er wel een doctype gedefinieerd zijn en dat vond mijn klant niet nodig... doctype toegevoegd en dan werkt het dus!