Centrer du texte dans un tableau (colspan?)

Bonjour tout le monde,

Cela a sans doute été posé mais je ne trouve pas malgré mes recherches.

J’ai crée un tableau pour mon design (avec beaucoup de mal mais ça prend forme).
Par contre, c’est un tableau avec 2 colonnes et x lignes.
Pour l’entête de ce tableau, j’aimerais centrer le texte.

y a t’il possibilité de centrer du texte sur une ou plusieurs cellules ?

merci
Olivier

Je cherche aussi mais il semblerait d’après un autre post que cela ne soit pas vraiment possible…

1 J'aime

Merci pour ta réponse.

Je trouve ça quand même bien handicapant :-/
Après, si tu veux mettre un titre à ta tuile.
J’ai vu que tu pouvais éventuellement appliquer un widget de type « tile » sur une commande info de ton virtuel.

Cela serait bien qu’ils puissent passer aux Flexbox et Flexgrid, un jour …
ça serait plus flexible.

bonjour,
c’est quoi le souhait exactement ?
si j’ai compris
sur plusieur colonnes faut jouer avec relative et une position x,y

position: relative; top: 0px; left: 170px;  text-align: -webkit-center;

sinon le centrage pour une colonne texte=« temp mini/vendredi 22 » ou valeur equipement=« 12 »

text-align: -webkit-center;

ou pour abc

display: flex;   align-items: center;   justify-content: center;  width: 100px;   height: 60px;

ou pour la valeur de l’equipement samedi 23

vertical-align: bottom;  display: block;   margin-left: auto;   margin-right: auto;   width: 40%;

image

pour personnaliser la couleur on peut joué avec le texte
<span style="color:blue;">test</span><br/><span style="color:red;">test2</span>
image

Merci pour cette réponse très détaillée !!

Je vous avoue que je vais éviter ça.
Positionnez avec des pixels et un décalage de l’élément par rapport au flux.
Je ne suis pas fan.

mais je prends note du reste :slight_smile:

Faudrait que je me renseigne sur les possibilités du plugin HTML Display :slight_smile: .

Si cela t’intéresse,j’ai codé une petite fonction en javascript pour gérer les colspan :


$( document ).ready(function() {
     	var test = addColspan($("TD")) ;

});


function addColspan(Tabobjets) {
  
  		
  		Tabobjets.each(function(objet) {
          
          if ($(this).css("column-span") != undefined)
          {
           		if ($(this).css("column-span") === 'all')
          		{
           			
                    var nbtd = $(this).siblings().length + 1;
                  	$($(this).siblings()).remove();
                    $(this).attr('colspan',nbtd);        
          		}               
                               
          }
          
          
        });
        
};

a mettre dans personnalisation avancée

ajouter le css column-span:all; dans la case que tu veux qu’elle prenne toute la largeur.

image

Par contre, a voir si cela ne bouffe pas trop de ressources.
Cela mérite peut-être d’être optimisé.

Bonjour @olivvv59

J’ai ajouté ton code dans la partie javascript de la personnalisation avancée et j’ai mis column-span:all dans ma colonne mais cela n’a rien fait … Si tu as une idée, je suis preneurcolspan

as tu essayé un petit ctrl+F5 ou ctrl+maj+r (pour obliger le navigateur internet à refaire son cache) sur le dashboard ?

Sinon j’ai fait une petite modif depuis
sur le 1er bloc :

$(window).on(‹ load ›, function() {
// code here
var test = addColspan($(« TD »)) ;
});

Yes mais je viens de voir dans la console que j’avais cette erreur

Uncaught SyntaxError: Invalid or unexpected token

quand je clique dessus, j’ai le code personalisé

$(window).on(‹ load ›, function() {
// code here
var test = addColspan($(« TD »)) ;
});

function addColspan(Tabobjets) {

	Tabobjets.each(function(objet) {
      
      if ($(this).css("column-span") != undefined)
      {
       		if ($(this).css("column-span") === 'all')
      		{
       			
                var nbtd = $(this).siblings().length + 1;
              	$($(this).siblings()).remove();
                $(this).attr('colspan',nbtd);        
      		}               
                           
      }
      
      
    });

};

EDIT : c’est bon, en fait cela venati des "

Cela fonctionne bien après avoir fait ctrl+shift+r mais si je fais f5 cela annule la mise en page

ah mince ,c’est curieux.
Tu as plusieurs navigateurs sur ton pc?
ça fait la même chose sur les autres?

Je viens de faire le test, même soucis entre edge et chrome

Et en essayant de vider le cache complètement du navigateur (dans les options) ?

Salut @olivvv59,

Chez moi sur Edge ça fonctionne après ctrl+F5 avec ce code :

$(window).on("load", function() {
	var test = addColspan($("TD")) ;
});

Par contre si on change de design et que l’on revient dessus, ça ne fonctionne plus.

Sur Firefox ça ne veux pas même avec ctrl+F5. J’ai essayé de trouver une autre façon de l’écrire mais pour le moment sans succès.

J’ai essayé également pour Firefox, le 1er code mais ça ne donne rien :

$(document).ready(function() {
	var test = addColspan($("TD")) ;
});

ah oui, curieux.Il ne doit pas charger les éléments dans le même ordre
je n’utilise pas Firefox, je n’avais pas vu le soucis.

test avec ça (et finalement, cela devrait être plus logique) :

$( document ).ready(function() {
var test = addColspan($(« TD »)) ;
});

Salut,

J’ai beau relire je ne vois pas de changement dans le code par rapport à ce que j’ai précisé au dessus ?

oups, c’est vrai.

désolé … j’ai fait les tests de mon coté en occultant ce que tu avais testé.

en tout cas, ça fonctionne avec firefox de mon coté.

Ah bon, ce code fonctionne sur Firefox avec des designs ?? C’est fou, je retenterai.

Voila mon code exactement :

$( document ).ready(function() {
var test = addColspan($(« TD »)) ;
});

function addColspan(Tabobjets) {

	Tabobjets.each(function(objet) {
      
      if ($(this).css("column-span") != undefined)
      {
       		if ($(this).css("column-span") === 'all')
      		{
       			//console.log('test');
                var nbtd = $(this).siblings().length + 1;
              	$($(this).siblings()).remove();
                $(this).attr('colspan',nbtd);        
      		}               
                           
      }
      
      
    });

};

des fois que j’ai fait des changements entre 2 mais je ne pense pas.
je suis en Firefox 79 (après, je n’utilise pas ce navigateur habituellement. Doc, je n’ai aucun plugin, ni rien)

Bon ben … ça veut pas c’est fou que tu y arrives :slight_smile:

J’aurais voulu arriver à mettre les 2 1ere lignes sur les 3 colonnes

Chez moi ça donne ça :
image

Le code :

$(window).on("load", function() {
	var test = addColspan($("TD"));
});

function addColspan(Tabobjets) {
	Tabobjets.each(function(objet) {
          if ($(this).css("column-span") != undefined) {
           	if ($(this).css("column-span") === 'all') {
                    var nbtd = $(this).siblings().length + 1;
                    $($(this).siblings()).remove();
                    $(this).attr('colspan',nbtd);        
          	}               
          }
    });
};

La conf :
image

Tu vois quelque chose qui va pas ?