Word wrap, maar iets anders

[YoshiBignose]

Ik heb een vrij brede tabel met in de <th> cellen een omschrijving. Door jQuery kan ik sommige kolommen eruit filteren. Wat ik me afvroeg is of het mogelijk is om met CSS woorden af te breken als het niet past in de <th> cel ZONDER dat de thead meerdere regels hoog wordt. Als ik dan enkele kolommen hide, is er meer ruimte en past het hele woord wel.

Bijv:

Naam Leeftijd Haarkleur Gewicht

wordt als het te krap is:

Naam Leef Haar Gewi

[DJMaze]

Ik zou zeggen: doe hier iets mee
P.S. oud artikel, het werkt tegenwoordig ook in Firefox

[ Voor 26% gewijzigd door DJMaze op 07-03-2016 20:31 . Reden: PS toegevoegd ]

[MueR]

Dit werkt alleen op elementen met een fixed width trouwens. Aangezien een tabel (tenzij je hem op table-layout: fixed zet) in principe altijd fluid is, gaat dit niet werken.

[DJMaze]

Ik moet je ongelijk geven Muer, er is een truukje met

code:

max-width:0

Heb even een fiddle gemaakt voordat TS zich een ongeluk zoekt op google https://jsfiddle.net/tddteo4e/
Compleet responsive dus

En hier één met wat random data: https://jsfiddle.net/tddteo4e/1/

[ Voor 47% gewijzigd door DJMaze op 08-03-2016 00:55 ]

[MueR]

Creatief. Ik heb precies dit geprobeerd op een paar tabellen in een project waar ik nu aan werk, daar deed het totaal niet wat ik wilde.

[DJMaze]

Nadeel is natuurlijk dat je niet weet welk woord er staat.
Er zijn 2 oplossingen:

code:

<th title="Hier nogmaals het woord">

Of deze: https://jsfiddle.net/tddteo4e/3/

[CH4OS]

Kun je niet gewoon gaan afkorten en <abbr> gebruiken? Gewicht kun je bijvoorbeeld in de eenheid neerzetten, bijvoorbeeld kilo, wat kg afgekort is, leeftijd zou je kunnen afkorten naar lt en haarkleur naar hk.
Als dat niet genoeg ruimte geeft, weet ik het ook niet meer...

[ Voor 71% gewijzigd door CH4OS op 08-03-2016 02:17 ]

[DJMaze]

MueR schreef op dinsdag 08 maart 2016 @ 01:02:
Ik heb precies dit geprobeerd op een paar tabellen in een project waar ik nu aan werk, daar deed het totaal niet wat ik wilde.

Met deze oplossing doet het het wel bij je?

[YoshiBignose]

Nice. Werkt perfect inderdaad thanks!

[MueR]

DJMaze schreef op dinsdag 08 maart 2016 @ 18:51:
[...]

Met deze oplossing doet het het wel bij je?

Nope, dit werkte daar niet.

[Savantas]

Ik heb zelf een keer iets als in deze jsfiddle gebruikt voor een tabel met veel data (de cellen hadden hooguit de waarde 10, titels waren lang). Kan misschien ook een optie zijn.

[DJMaze]

YoshiBignose schreef op dinsdag 08 maart 2016 @ 19:32:
Nice. Werkt perfect inderdaad thanks!

Heb naar aanleiding van een discussie ook deze bedacht https://jsfiddle.net/y1mazcud/1/