2
votes

Déplacer la table <tfoot> vers la droite avec CSS

J'ai ce tableau que je ne peux pas modifier sa <tfoot> HTML <tfoot> , il est rendu avec une fonction PHP qui ne peut pas changer. Je ne peux donc pas changer le <tr> à l'intérieur du <tfoot> .

Comment puis-je déplacer la zone rouge (x1, x2) vers la droite avec juste du CSS?

https://jsfiddle.net/qL03728p/

<table cellspacing="0">

  <thead>
    <tr>
      <th>thead 1</th>
      <th>thead 2</th>
      <th>thead 3</th>
      <th>thead 4</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>tbody 1</td>
      <td>tbody 2</td>
      <th>tbody 3</th>
      <th>tbody 4</th>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>x1</td>
      <td>x2</td>
    </tr>
  </tfoot>

</table>

table {
  width: 100%;
  border-collapse: separate;
}

table td {
  border-top: 1px solid red;
}

thead {
  background: green;
}

tbody {
  background: yellow;
}

tfoot {
  background: red;
}

html css css-tables

1 commentaires

Sachez que l'alignement visuel sans alignement structurel laisse votre table avec une accessibilité médiocre. Ceux qui utilisent des technologies d'assistance (lecteurs d'écran, etc.) auront du mal à déchiffrer vos données. Déposer deux cellules de tableau vides avec PHP ou JavaScript est une bien meilleure solution.

3 Réponses :

0
votes

Sans utiliser Javascript, c'est faisable mais pas de manière propre. (Ou pas que je sache)

Je ne pense pas que vous puissiez modifier la structure HTML uniquement avec du CSS, mais vous pouvez faire quelque chose comme ceci:

<table cellspacing="0">
    
    <thead>
        <tr>
            <th>thead 1</th>
            <th>thead 2</th>
            <th>thead 3</th>
            <th>thead 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>tbody 1</td>
            <td>tbody 2</td>
            <th>tbody 3</th>
            <th>tbody 4</th>
        </tr>
    </tbody>
    
     <tfoot>
        <tr>
            <td>x1</td>
            <td>x2</td>
        </tr>
    </tfoot>
    
</table>

JSFiddle

Vous pouvez jouer avec la valeur de l'attribut "gauche" pour obtenir exactement ce dont vous auriez besoin.

table {
    width: 100%;
    border-collapse: separate;
    overflow:hidden;
}
table td {
    border-top: 1px solid red;
}
thead {background: green;}
tbody {background: yellow;}
tfoot {
  position:relative;
  background: red;
  left:25%;
  }

tfoot {
  position:relative;
  background: red;
  left:20%;
  }

Si vous aviez la possibilité d'utiliser Javascript, vous pourriez ajouter une balise "" à la structure, juste avant la balise "x1". Donnez-lui un nom de classe pour pouvoir le personnaliser avec css. Cela pousserait correctement les deux autres vers la gauche.

0 commentaires

1
votes

Comme le mentionne une autre réponse, cela semble assez difficile à réaliser sans l'utilisation de JavaScript, d'autant plus que les éléments td sont absents du tfoot .

Cependant, il existe une solution alternative utilisant une transformation qui utilise translateX sur le tfoot :

<table cellspacing="0">
    
    <thead>
        <tr>
            <th>thead 1</th>
            <th>thead 2</th>
            <th>thead 3</th>
            <th>thead 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>tbody 1</td>
            <td>tbody 2</td>
            <th>tbody 3</th>
            <th>tbody 4</th>
        </tr>
    </tbody>
    
     <tfoot>
        <tr>
            <td>x1</td>
            <td>x2</td>
        </tr>
    </tfoot>
    
</table>

Cela déplace l'élément entier de 50% vers la droite.

Comme l'a souligné @isherwood dans les commentaires, cela a pour effet secondaire inutile de créer un débordement horizontal sur la table. Cela peut simplement être corrigé en définissant overflow: hidden sur la table CSS:

table {
    width: 100%;
    border-collapse: separate;
    overflow: hidden;
}
table td {
    border-top: 1px solid red;
}
thead {background: green;}
tbody {background: yellow;}
tfoot {
    background: red;
    transform: translateX(50%);
}

Le voici dans un extrait de code de travail:

table {
    ...
    overflow: hidden;
}

tfoot {
    background: red;
    transform: translateX(50%);
}

1 commentaires

Et une mise en garde: cette solution suppose des largeurs de colonne uniformes. Comme les tableaux sont fluides, dès qu'une colonne a un contenu plus large, les choses deviendront loufoques. Définissez des largeurs de colonne fixes pour éviter les problèmes.

-2
votes

Vous pouvez tromper par html comme ceci:

<tfoot>
    <tr>
        <td>x1</td>
        <td>x2</td>
        <td></td>
        <td></td>
    </tr>
</tfoot>

ajouter simplement deux autres lignes vides

3 commentaires

OP a déjà indiqué qu'il ne pouvait pas modifier le HTML - il recherche une solution uniquement CSS.

En outre, les cellules vides (et non les lignes) doivent être au début de la ligne.

Hé, tout va bien. Je ne suis pas un programmeur professionnel et j'ai 12 ans et demi. Et j'ai quelques erreurs d'anglais et de programmation, grâce à Isherwood et Martin. Par conséquent, je n'ai pas utilisé JAVASCRIPT et CSS car je ne veux pas utiliser beaucoup de programmation dans un problème simple. 😭 Je veux juste aider 😢