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 :

Éloigner une ligne de tableau de la précédente


Sujet :

Tableau en CSS

  1. #1
    Membre confirmé
    Éloigner une ligne de tableau de la précédente
    Bonjour à tous,

    Je n'arrive pas à décoller (éloigner) une ligne de tableau de la précédente.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .tr2
    {
    	height:30px;
    	border-spacing:15px;
    	border-top:1px solid;
    	background-color:yellow;
    	color:maroon;
    	font-size:1.2rem;
    	font-style:italic;
    	font-weight:bold;
    	vertical-align:bottom;
    }

  2. #2
    Membre expert
    padding-top ou margin-top
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre confirmé
    Non, ça ne fonctionne pas sur les lignes (<tr>) de tableaux. Les lignes de style apparaissent dans la console mais sont sans effet sur le tableau.

  4. #4
    Modérateur

    Bonjour,
    la classe .tr2 est appliquée sur quel élément de la <table> ?

    Si c'est la <table> elle même il n'y a que border-spacing qui agit sur « l'éloignement » de toutes les cellules, verticalement comme horizontalement.

    Tu peux néanmoins jouer avec un padding appliqué aux cellules.

    Autre solution, dite « gros bidouillage », passer tes <tr> en display:block et là tu peux leur appliquer une marge, attention il te faudra dans ce cas définir les largeurs de tes <td>, mais bon ...

  5. #5
    Membre confirmé
    @NoSmoking
    Comme son nom l'indique, la classe .tr2 s'applique aux lignes donc aux balises <tr>. Il n'y a que les lignes qui ont cette classe qui doivent être séparées des précédentes. Sachant que ces lignes ne comportent qu'une cellule (colspan='6')

  6. #6
    Modérateur

    Comme son nom l'indique, la classe .tr2 s'applique aux lignes donc aux balises <tr>.
    on en a vu tellement sur le forum que l'on préfère faire préciser

    Sachant que ces lignes ne comportent qu'une cellule (colspan='6')
    c'est une information pertinente et je me pose la question si ta construction HTML est judicieuse mais bon ..!

    Tu peux jouer avec la largeur des border-top pour « éloigner » les éléments, un exemple simple.
    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    table {
      border-collapse: separate;
      border-spacing: 0;
    }
    td {
      height: 1.5em;
      padding: .25em;
      border: 1px solid #888;
      border-width: 0 1px 1px 0;
    }
    td:not([colspan]):first-child {
      border-left-width: 1px;
    }
    [colspan] {
      height: 3em;
      border-width: 10px 0 1px;
      border-top-color: #FFF;
      font-weight: 700;
      background-color: #CDE;
    }

    teste avec le HTML suivant :
    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
    <table>
      <tbody>
        <tr><td colspan="5">Colspan 1</td></tr>
        <tr><td>C1 - L1</td><td>C2 - L1</td><td>C3 - L1</td><td>C4 - L1</td><td>C5 - L1</td></tr>
        <tr><td>C1 - L2</td><td>C2 - L2</td><td>C3 - L2</td><td>C4 - L2</td><td>C5 - L2</td></tr>
        <tr><td>C1 - L3</td><td>C2 - L3</td><td>C3 - L3</td><td>C3 - L3</td><td>C5 - L3</td></tr>
        <tr><td colspan="5">Colspan 2</td></tr>
        <tr><td>C1 - L4</td><td>C2 - L4</td><td>C3 - L4</td><td>C4 - L4</td><td>C5 - L4</td></tr>
        <tr><td>C1 - L5</td><td>C2 - L5</td><td>C3 - L5</td><td>C4 - L5</td><td>C5 - L5</td></tr>
        <tr><td colspan="5">Colspan 3</td></tr>
        <tr><td>C1 - L6</td><td>C2 - L6</td><td>C3 - L6</td><td>C4 - L6</td><td>C5 - L6</td></tr>
        <tr><td>C1 - L7</td><td>C2 - L7</td><td>C3 - L7</td><td>C4 - L7</td><td>C5 - L7</td></tr>
        <tr><td>C1 - L8</td><td>C2 - L8</td><td>C3 - L8</td><td>C4 - L8</td><td>C5 - L8</td></tr>
      </tbody>
    </table>


    Tu pourrais également simuler l'« éloignement » en utilisant un background: linear-gradient(...).

  7. #7
    Membre confirmé
    Mon tableau est en fait un genre d'annuaire avec des titres généraux (pays et régions) et des sous-titres (villes). Ces titres utilisent la largeur du tableau (d'où les colspan) alors que les données sont réparties sur les différentes colonnes. Ceci rend difficile l'application d'éléments généraux comme les colspan. Par contre, je ne connaissais pas les linear-gradient et c'est une bonne solution pour adapter l'impression d'éloignement en fonction du type de titre ou de sous-titre. Merci!

###raw>template_hook.ano_emploi###