28234 sujets

CSS et mise en forme, CSS3

[Résolu] Formulaire tableau

Bonjour,

J'ai le souhait de faire un formulaire qui ressemble à ceci :
http://www.hapshack.com/images/irAOL.png
Ma question est la suivante : pratique dépréciée ou pas que de mettre un formulaire sans un tableau, quitte à ce que les labels soient en th?


<table>
  <tr>
    <th><label>Thématique</label></th>
    <th><label>Précision</label></th>
    <th><label>Niveau</label></th>
  </tr>
  <tr>
    <td><select>...</select></td>
    <td><input type="text"></td>
    <td><select>...</select></td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>


Merci pour vos réponses !

PS : zut, j'aurais dû mettre ça dans la rubrique HTML et non en CSS...
Modifié par Reka (07 Dec 2015 - 22:10)
Bonjour,

Vous pourriez faire cela en display table, avec un point de rupture pour le responsive : Test for Reka

upload/35007-Capture.jpg

On pourrait aussi réaliser la même mise en page avec une grille flexbox, mais il n'y a pas d'intérêt ici.
Modifié par Olivier C (08 Dec 2015 - 08:59)
Merci Olivier, l'idée est bonne, et le rendu sympathique.

Mais intégrer un framework CSS en plus alors que j'ai déjà un reset, une grid, font-awesome, des éléments de foundation et mon propre style qui fait plus de 700 lignes, c'est pas mal ressourcivore, non... ?

En tout les cas, c'est bien de me rappeler de veiller à garder une vue adaptative.
Mais si je mets mes td en %, mon tableau est fluide et donc responsive, non?
Peut-être que j'y perds au minimum en accessibilité avec une construction pareille, je ne sais pas...?
Le framework (qui est le mien) c'était pour un exemple... Un tableau en pourcentage sera en responsive... mais jusqu'à un certain point : essayez votre code dans une définition inférieure à 320px, vous allez voir...

Pour revenir au display table. L'idée est de mettre ça sur l'élément parent de chaque ligne :
.monTableau {
    display: table;
    table-layout: fixed;
    width: 100%;
}

Et si un élément enfant doit être 2 fois plus grand que les autres par exemple (comme l'imput au centre) :
.monTableau .maBigColonne {
    width: 200%;
}

Et tout ça à mettre dans un media queries min-width pour que le tout ne soit en tableau qu'à partir d'un certain point que vous aurez définit.
J'avais constaté que le framework était le vôtre, c'est vraiment du très bon travail Smiley smile .
Je vais tester le display table etc.
Merci pour votre aide.
Reka a écrit :
J'avais constaté que le framework était le vôtre, c'est vraiment du très bon travail Smiley smile .

@Olivier C : hé hé, ton prosélytisme commence à porter ces fruits ! Smiley cligne Smiley lol
Sujet clos
Aller à