Hack css et display table

Bonjour à tous,
Je sèche un peu sur une problématique de positionnement. Avant tout, je dois prévenir :
1/ je n'ai pas complètement main sur la structure html
2/ je ne dois pas faire intervenir javascript
3/ Je ne peux pas utiliser de tableau imbriqués car c'est du dataTable
4/ les hauteurs de cellules ne peuvent pas être fixées
5/ compatibilité lte ie8 demandée

Je dois donc composer avec les moyens du bord

Le but est :
dans les cellules d'un table, je dois avoir 2 sections superposées l'une à l'autre. La première doit avoir un vertical-align: top, l'autre bottom.

Jusque là aucune solution viable n'a été retenue. Voici le code :

http://codepen.io/neovea/pen/YXKWXb
Modifié par neovea (20 Apr 2015 - 10:54)

Ce sont les span qui font office de sous-cellules.

Ps : erreur de ma part pour les span, je fais des tests.

Pour plus de clarté, le rendu final :

Modifié par neovea (17 Apr 2015 - 18:09)

Merci pour tes exemples, j'avais déjà testés ces solutions. Les premières ont l'inconvénient de centrer les "celulles" verticalement et de ne pas prendre toute la hauteur. La dernière est celle que je souhaite appliquer, le frein étant que c'est du dataTable et que ça risque de tout fiche en l'air et de ne plus fonctionner. Ah, technologie quand tu nous tiens...

Merci en tout cas j'apprécie le partage. Je pense qu'il va falloir qu'on revoit en interne la façon de procéder.