Tabel breedte en responsief geneuzel

[sdk1985]

Ik wordt momenteel steeds geconfronteerd met het feit dat ik eigenlijk geen idee heb hoe een html tabel tegenwoordig werkt.

Als ik standaard vanuit Excel een tabel naar WordPress kopiër dan krijg je netjes de html tabel inclusief de benodigde td width="x". Helaas heeft de browser daar tegenwoordig totaal geen boodschap aan.

Vervelende is dat ik wel graag wat meer controle zou willen over hoe breed een bepaalde kolom is. In dit voorbeeld is de kolom population veel te breed: *snip* spam; maak gewoon een testcase a.u.b. . De tabel layout is overigens met een css generator gemaakt .

Als ik op deze informatieve website kijk dan zie ik dat het in ieder geval kan: https://css-tricks.com/complete-guide-table-element/ Maar hoe ze zelf sommige kolommen zo smal maken krijg ik met "inspect element" niet boven water!

Daarnaast gaat het ook helemaal scheef als je bijvoorbeeld mobiel de site bekijkt (of je venster kleiner maakt). Maar dat is eigenlijk een secundair probleem. Het grootste probleem is nu die layout.

Elke vorm van hulp is zeer welkom .

[ Voor 10% gewijzigd door RobIII op 11-03-2015 22:05 ]

[Xepos]

Ik heb de benodigde informatie zo nu even niet bij de hand. Maar je population kolom kan eigenlijk niet veel smaller omdat de header zo breed is.
Of je wilt dat de lijnen van header en data niet gelijk lopen dan kan het ook.

Ik gebruik overigens vaak de jQuery plugin: http://datatables.net/.
Moet je maar eens even induiken of ze de juiste dingen aanbieden. Responsive design zit er al in verwerkt.

[ Voor 28% gewijzigd door Xepos op 11-03-2015 22:02 ]

[Verwijderd]

Eigenlijk gebruik ik geen <table> meer.
Dit is een verouderde techniek, die overigens de performance aantast, aangezien ze meer render-tijd nodig hebben dan andere elementen.

Ik gebruik de Bootstrap Grid Layout
Hiermee kun je van 4 ingebouwde presets gebruik maken, die de mobiele, tablet, laptop en PC scherm vertegenwoordigen. Ook kun je gemakkelijk dingen verbergen op kleinere schermen.

Bootstrap heeft ook 'echte' tables.
Voordeel van Bootstrap is dat het (bijna) allemaal standaard responsive is.
Of dit ook in jouw Wordpress op te nemen is, is weer de vraag natuurlijk.

[NNF]

^ Eh? Klok, klepel...

Er is helemaal niets mis met tabellen, mits juist gebruikt, namelijk om tabulaire data weer te geven. Dat moet je helemaal niet willen met een grid; het is oneindig veel lastiger om de juiste opmaak te krijgen en het is semantisch gezien onjuist.

Als je het hebt over het gebruik van tabellen om een layout te maken dan heb je uiteraard gelijk, maar dat is echt iets van heel lang geleden. Dat is zeker al een jaar of tien uit de mode, zo niet langer.

[NMe]

Ik kan niet genoeg benadrukken hoe waar de post boven mij is. Als je roept dat tables per definitie achterhaald zijn heb je niet helemaal goed begrepen waar die hele anti-table-beweging over gaat. Daarbij zijn ze prima stylen en als er inderdaad een tragere rendertijd aan vastzit is die zó marginaal dat je hem kan verwaarlozen. Bovendien is de kans groot dat elke andere manier om een grote te tekenen meer rekenkracht kost...

[Bosmonster]

Lastigste is om ze goed responsive te krijgen. Makkelijkste is om ze te wrappen in een divje met overflow: auto, maar heel gebruiksvriendelijk is dit bij grotere tabellen ook niet.

Alle andere methodes vereisen vaak hele specifieke tabelstructuren (en werken dus niet bij tabellen die users kunnen invoeren in een wysiwyg) of bakken met script (en daar moet ik de eerste foutloze implementatie nog van tegenkomen)

[ Voor 21% gewijzigd door Bosmonster op 16-03-2015 09:07 ]

[ViNyL]

Er zijn wel een aantal oplossingen: http://exisweb.net/responsive-table-plugins-and-patterns

Vraag is vooral wat praktisch is etc. In het bovenste artikel worden de meeste oplossng iig wel opgesomt die op dit moment voor responsive doeleinden gebruikt worden.

[JaPPa03]

Komt er dus op neer dat je even wat dieper in de HTML/CSS materie moet duiken rondom tabellen. Volgens mij past een tabel standaard zijn grote aan qua content. Dus een smalle tabel = weinig tekst. Dat is lig de manier zoals ik het zie op css tricks.

[incaz]

Verwijderd schreef op zondag 15 maart 2015 @ 15:02:
Dit is een verouderde techniek, die overigens de performance aantast, aangezien ze meer render-tijd nodig hebben dan andere elementen.

Dit is op te lossen met table-layout: fixed; en speelt vooral een rol bij tables met zeer veel data.
(Het is overigens niet zozeer de techniek die de performance aantast, maar de wens: namelijk dat de weergave van alle elementen zich aanpast aan de data, zodat je de layout moet herberekenen. Dit kost uiteraard meer tijd dan het weergeven van een data in een een vast of per rij onafhankelijk formaat.)

Meer info: https://css-tricks.com/fixing-tables-long-strings/