Hoe kan ik een een tabel aanpassen aan de breedte?

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Plaats reactie
yolandal
Berichten: 3
Lid geworden op: ma 24 feb 2020, 12:41

Hoe kan ik een een tabel aanpassen aan de breedte?

Bericht door yolandal »

Hallo allemaal,

Fijn dat dit forum bestaat!
Ik weet best wel wat van CSS (en Wordpress), maar na veel googlen kom ik toch niet de oplossingen tegen voor mijn wens.

Ik gebruik namelijk regelmatig tabellen op mijn site (www.yory.nl), maar dan met weinig inhoud in de breedte.
De code van de tabel heb ik helemaal leeg, dus <table><tr><td> enz.
Ik heb gespeeld met de code table { table-layout: auto; } maar dat werkt niet zoals ik wil.

Ik wil namelijk dat de cellen van de tabel aansluiten aan de max. breedte van de inhoud. (zie 2e plaatje verschoven met Photoshop)

Hoe krijg ik dat voor elkaar?

Hartelijk dank!

Afbeelding
Afbeelding
Goeroeboeroe
Beheerder
Berichten: 269
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hoe kan ik een een tabel aanpassen aan de breedte?

Bericht door Goeroeboeroe »

Hallo Yolanda,
Leuke site, ziet er heel vrolijk uit.

Dit forum is eigenlijk bedoeld voor vragen over de voorbeelden op deze site, maar er staat ook dat je het altijd kunt proberen, dus bij deze.
Het kan wel zijn dat het soms even duurt voor je antwoord krijgt, want ik ben eigenlijk de enige die hier reageert. Dat betekent ook dat eventuele fouten van mij niet snel worden opgemerkt. Als je 'n drukker forum met meer ogen wilt, kun je https://www.helpmij.nl/forum/forum.php proberen.

Maar afgezien hiervan wil ik best even proberen je te helpen.

In principe neemt een tabel standaard automatisch de breedte van de kolommen aan, ook zonder table-layout: auto. Dus in principe zou het moeten werken, zoals jij wilt.
Dat is mooie theorie, zeker als je met iets als Wordpress werkt, want dat gooit er op de wildste plaatsen bergen css in.

Wat er mis kan gaan:
* De tabel mag geen breedte hebben. Als de tabel bijvoorbeeld 100% breed is, vult de tabel de volledige breedte van de ouder. De ruimte die dan overblijft in de kolommen, wordt gelijkelijk verdeeld over de kolommen. Hier lijkt het bij jou op.
Als dit de oorzaak is, kun je proberen die breedte weg te halen. Hoewel dat in een cms als Wordpress best nog lastig kan zijn. Je kunt ook iets als width: 100%; vervangen door max-width: 100%;. Nu wordt de tabel niet breder dan nodig is voor de inhoud ervan.

* De kolommen (<col>) of cellen (<td>) kunnen een breedte hebben. Als die bijvoorbeeld een breedte van vast 300 px hebben, maakt het verder niet zoveel meer uit wat je met de <table> doet.

Het kan best lastig zijn om bij 'n CMS zoals Wordpress uit te vinden, waar eventueel een breedte aan de tabel wordt gegeven. Wat in principe altijd zou moeten werken is gewoon in de <table>-tag iets te zetten als <table style="max-width: 100%;">. Dit 'wint' van de css die elders staat.

Als dit niet werkt, kun je dan 'n link geven naar zo'n verkeerde tabel? Als ik de code kan zien, is het (waarschijnlijk) snel duidelijk, waar het misgaat.
Succes!
Peter
yolandal
Berichten: 3
Lid geworden op: ma 24 feb 2020, 12:41

Re: Hoe kan ik een een tabel aanpassen aan de breedte?

Bericht door yolandal »

Beste Peter,

Ik wist niet dat het forum alleen voor de site was, dus erg fijn dat je me alsnog wilt helpen!
Gek genoeg kon ik online maar weinig CSS forums vinden, en op de Wordpress.com site blijkt het alleen voor sites die daar gebouwd zijn.
Ik ben wel lid van Helpmij, maar wist niet dat zij ook een CSS onderdeel hadden.

Mijn tabellen zijn zo clean mogelijk. Ik kan in de CSS niets vinden / ik heb in de CSS niets geplaatst wat de breedte van de tabellen negatief zou kunnen beinvloeden.

Het gaat om de tabellen op ieder artikel op mijn site onderaan. Ik heb daar een 1-row tabel geplaatste met interne links. B.v. op deze
https://www.yory.nl/online-familieberichten/

Ik wil het liefst niet in iedere tabel de html code plaatsen, dus zoek ik een CSS oplossing.

Als ik met mijn inspector op de tabel ga staan, zie ik wel width:100%, maar ik weet niet waar de bron staat.
Het lukt mij niet om die te wijzigen in max-width, dan komt er een streep doorheen.

Hopelijk zie en kan jij meer?

In ieder geval top dat je me wilt helpen!
yolandal
Berichten: 3
Lid geworden op: ma 24 feb 2020, 12:41

Re: Hoe kan ik een een tabel aanpassen aan de breedte?

Bericht door yolandal »

Hoi Peter,

Volgens mij ben ik er al uit, ik heb toegevoegd:

table {display: flex;}
td { padding-right: 30px;}

en dat werkt!

Ik heb het van https://stackoverflow.com/questions/455 ... table-cell
waar veel codes staan, en ik ben maar gaan proberen.

Het schijnt dat browsers problemen hebben met max-width, dat wist ik niet.
Ik ben blij dat dit werkt. Dank voor het meedenken!
Goeroeboeroe
Beheerder
Berichten: 269
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hoe kan ik een een tabel aanpassen aan de breedte?

Bericht door Goeroeboeroe »

Hoi Yolanda,
Dat is inderdaad ook nog een mogelijkheid.
Leuk dat het gelukt is.
Peter
Plaats reactie