Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise en forme d'un tableau


Sujet :

Tableau en CSS

  1. #1
    Membre régulier
    Mise en forme d'un tableau
    Bonjour

    Je connais très peu et je découvre CSS.
    J'ai un tableau tiré de RsForm qui affiche les résultats d'un formulaire et je souhaiterais le mettre en forme.
    Ma difficulté est de mettre en forme ce que j'ai trouvé en examinant l'élément. Il y a bien dans RsForm dans la zone répertoire une zone CSS mais j'avoue ne pas savoir comment l'écrire.

      Centrer les lignes de titre (ca marche en testant directement sur la page). Voilà ce que j'ai ajouté mais je me rends bien compte que ca ne correspond pas à grand chose
      table.weblinks th, table.category th {
      text-align: center;
      }

      Idem je veux mettre des bordures et j'ai trouvé avec collapse mais je n'arrive qu'à encadrer le tableau de manière global avec
      border: 1px solid blue;
      Et l'option separate ne marche pas derrière collapse

    Voici le lien de la page : https://champfrance.soinsenergie.fr/...u-liste-compet

    A priori quand je teste la ligne pour centrer le titre dans le code j'ai bien center mais je me retrouve avec un code left qui semble forcer la position du titre ?

    Désolé ca va un peu dans tout les sens mes explications

    Merci d'avance de votre aide

  2. #2
    Invité
    Invité(e)
    Bonjour,

    Eh ben... :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <tr class="row0 directoryRow">
    	<td align="center" class="center directoryGrid">.........</td>
    	<td align="center" class="center directoryCol directoryColNom-organisateur">...</td>
    	<td align="center" class="center directoryCol directoryColRegion">...</td>
    	<td align="center" class="center directoryCol directoryColType-competition">...</td>
    	<td align="center" class="center directoryCol directoryColNom-competition">...</td>
    	<td align="center" class="center directoryCol directoryColChampionnat-departemental">...</td>
    	<td align="center" class="center directoryCol directoryColRegion-2">...</td>
    	<td align="center" class="center directoryCol directoryColDate">...</td>
    	<td align="center" class="center directoryCol directoryColNom-club">...</td>
    	<td align="center" class="center directoryCol directoryColDepartement">...</td>
    	<td align="center" class="center directoryCol directoryColSite">...</td>
    	<td align="center" class="center directoryCol directoryColChampionnat-regional">...</td>
    	<td align="center" class="center directoryActions" nowrap="nowrap">...</td>
    </tr>

    Et ça dans tous les <tr> !

    • align="center" est obsolète (à supprimer)
    • toutes ces classes sont-elles bien utiles ?

    Un BON CODE est un CODE SIMPLE

  3. #3
    Membre régulier
    Merci des éléments.
    Pour le centrage du texte j'ai juste le problème sur la ligne des légendes, les textes des colonnes sont bien centrées.
    Et dans le code j'ai un
    text-align : left
    sur la ligne des légende. Quand je l'enlève avec l'examinateur d'élément de firefox mes étiquettes sont bien centrées.

    Avec une image se sera peut être plus parlant. Et mon second soucis mais qui est plus lié à RsForm, c'est que je ne sais pas ou mettre ce code.

    Merci de votre aide

  4. #4
    Membre régulier
    J'ai essayé cela mais cela ne fonctionne pas. Mon text align apparait en haut de ma page, il manque des instruction de class ou id pour gérer l'alignement du bon bloc j'imagine, mais là j'ai bien du mal

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <table class="table table-condensed table-striped category directoryTable">
    <th>text-align: center</th>
    </table>

  5. #5
    Membre régulier
    Bon j'ai trouvé pour l'alignement des étiquettes reste les bordures
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <style type="text/css">
    .directoryHead{
    text-align: center!important;
    }
    </style>

###raw>template_hook.ano_emploi###