[Résolu] Flexbox dans un élément tabulaire

Bonjour à tous,

j'ai suivi avec intérêt les échanges de cette page du forum ->
http://forum.alsacreations.com/topic-4-74287-1-RnsoluFlexboxetgestiondelapositionverticaleethorizontale.html
qui m'ont permis de tester le positionnement avec flexbox mais dans un tout autre cadre et, évidemment, cela ne fonctionne absolument pas !

Voilà le pb:
J'ai un "table" avec un <thead> qui contient un <tr> et plein de <th> et ce qu'il me faudrait en fin de compte c'est que un <th> sur deux se mettent l'un en dessous de l'autre formant ainsi visuellement une seconde ligne .
J'ai testé avec flexbox: display: flex; flex-direction: row; flex-wrap: wrap; pour le parent et de mettre un élément sur deux en align-self: flex-start et le deuxieme align-self: flex-end;

mais le résultat n'est pas génial; je peux séparer 1 <th> sur 2 c'est bon mais je n'arrive pas à faire 2 lignes distinctes bien l'une au-dessous de l'autre ...
la chose est-elle possible d'après vous ou pas ?

j'ai mis le code d'exemple ici-> http://jsfiddle.net/fybhxqyj/

Au passage: merci beaucoup @raphael goetter pour le "Jack in the flexbox", une merveille !
Ma référence dès que j'ai un souci de positionnement, un truc à réaliser avec les pieds au mur et la tête à l’envers tu vois, et on cours trouver une soluss dans le Jack, bien pratique ! Mais là pour ce cas précis, j'trouve pas

merci à tous

Bonjour @raphael,

merci c'est génial ! tu as raison avec un peu de JS par-dessus, cela devrait donner le résultat souhaité, c'est super !
Juste une question, je ne comprends pas la nécessité d'un z-index ici :

th:nth-of-type(even) {
  z-index: 1;
  background: pink
}

En tous cas merci beaucoup . Have a good day !

Aucune utilité, un test avorté