Discussion :

[zoohayr]

Bonjour tout le monde,

J'ai des donnés insérer dans un tableau qui ne sont pas aligner verticalement. je voudrais les aligner mais je sais plis comment faire ! y'a quelqu'un qui peut m'aider à faire et merci d'avance .

voilà le lien ou j'en ai le tableau : https://medika.ma/medicamenta

[Invité]

Bonjour,

tu n'as pas un seul tableau, mais plusieurs <table> indépendantes *.

Si tu veux pouvoir aligner (sur la même verticale) les différentes cellules, il faut leur donner une largeur (en % par exemple).


* Par conséquent, l'utilisation de <table> ne se justifie pas, puisque chaque table n'a qu'une seule ligne !
On peut très bien les remplacer par des <div> en utilisant en CSS : display:table; display:table-cell; pour simuler le comportement des <table>.
De fait, il sera facile d'indiquer en CSS la largeur de chaque <div> "cellule".


[EDIT] Ton code est une grosse usine à gaz, qui comporte aussi beaucoup d'erreurs de structure (<div> dans <tabel>, balises mal fermées ou pas où il faut,...) : https://validator.w3.org/

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!-- extrafields columns -->
  <div class="responsive rt">
    <table>
    <tbody>
	<tr>
    <td> <li> <h5 class="catItemTitle">
 
	  				<a href="/anti-inflammatoires/anti-inflammatoires-non-steroidiens-ains/item/9966-meloxam-7-5mg-boite-de-28-comprime">
	  		MELOXAM 7,5mg ( boite de 28 comprimé )	  	</a>
	  	</li></h5> </td>
         <div class="extrafieldscolumns">
           <ul>
 
            <td>  <li>70,00</li> </td>
            <td>  <li>70%</li> </td>
            <td>  <li><img src="/images/Pharmacie/Disp.png" alt="Disponibilité" /></li> </td>
 
 
          </ul>
          </div>
		  </tr>
		  </tbody>
		  </table>
		  </div>
        <!-- END extrafields columns -->
 
			</div>
						<div class="clr"></div>
 
 
			<div class="itemContainer1 itemContainerLast" style="width:100.0%;">
 
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
 
	<!-- Plugins: BeforeDisplay -->
 
	<!-- K2 Plugins: K2BeforeDisplay -->
 
	<div class="catItemHeader">
 
 
       	  <!-- Item title -->
 
	  		  </h5>
 
		  </div>
 
  <!-- Plugins: AfterDisplayTitle -->
 
  <!-- K2 Plugins: K2AfterDisplayTitle -->
 
 
  <div class="catItemBody">
 
	  <!-- Plugins: BeforeDisplayContent -->
 
	  <!-- K2 Plugins: K2BeforeDisplayContent -->
 
 
 
		<div class="clr"></div>
 
	  	  <!-- Item extra fields -->
	  <div class="catItemExtraFields">
 
 
	    <div class="clr"></div>
	  </div>
 
	  <!-- Plugins: AfterDisplayContent -->
 
	  <!-- K2 Plugins: K2AfterDisplayContent -->
 
	  <div class="clr"></div>
  </div>
 
 
	<div class="clr"></div>
 
 
 
  <div class="clr"></div>
 
 
 
	<div class="clr"></div>
 
 
  <!-- Plugins: AfterDisplay -->
 
  <!-- K2 Plugins: K2AfterDisplay -->
 
	<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->

[zoohayr]

Bonjour jreaux et merci pour votre attention,

concernant ta phrase "tu n'as pas un seul tableau, mais plusieurs <table> indépendantes". c'est parce que je vois pas comment je dois affiché les données des champs supplémentaires de plusieurs ! en fait je n'y intégré que le code Html d'un tableau et le voilà :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 <div class="responsive rt">
    <table>
    <tbody>
	    <tr>
 
 
 
			<?php if(isset($this->item->editLink)): ?>
			<!-- Item edit link -->
			<span class="catItemEditLink">
				<a data-k2-modal="edit" href="<?php echo $this->item->editLink; ?>">
					<?php echo JText::_('K2_EDIT_ITEM'); ?>
				</a>
			</span>
			<?php endif; ?>
 
	  	<?php if ($this->item->params->get('catItemTitleLinked')): ?>
		<ul>
		<td> <li> <h5 class="catItemView">	<a href="<?php echo $this->item->link; ?>">
	  		<?php echo $this->item->title; ?>
	  	</a>
	  	<?php else: ?>
	  	<?php echo $this->item->title; ?>
	  	<?php endif; ?></li></h5> </td>
 
 
 
 
            <td>  <li><?php echo $this->item->extraFields->PPVDh->value ;?><?php echo $this->item->extraFields->Tlephone->value ;?></li> </td>
            <td>  <li><?php echo $this->item->extraFields->Remboursement->value ;?><?php echo $this->item->extraFields->PVC->value ;?><?php echo $this->item->extraFields->Ville->value ;?></li> </td>
            <td>  <li><?php echo $this->item->extraFields->Disp->value ;?></li> </td>
 
 
          </ul>
 
		  </tr>
 
		  </tbody>
		  </table>
		  </div>

Donc si vous avez une idée sur comment y remplacer ces plusieurs par un seul tableau, je y serai très reconnaissant et ça me complique aussi la vie sur l'alignement car la deuxième colonne dépend de la longueur de la première et puisque les titres ne sont pas égaux ça donne lé résultat affiché.

voici le code que j'ai en css :

Code :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.itemContainer1 {
display: table;
}
.catItemView  {
width: 80%;
float: left;
}
.medicamenta #k2Container article header h2 a {
color: blue;
}
.extrafieldscolumns li:first-child {
width: 10%;
}
 
.extrafieldscolumns li:nth-child(2) {
width: 10%;
}
 
.extrafieldscolumns li:nth-child(3) {
width: 7%;
}
.extrafieldscolumns li:nth-child(4) {
width: 2%;
}
 
.itemContainer1 .catItemView {
    float: left;
  }
 
.itemContainer1 .extrafieldscolumns {
    width: 100%;
}
 
 
 ul{ margin-top: 0px; margin-bottom: 0px; padding-top: 0px;padding-bottom: 0px
 
}

Donc d'après ce que j'ai compris si j'arrive à afficher les données dans un seul tableau ça sera facile à les aligner sinon je vois pas comment

[miss_socrates]

Je me demande si ce ne serait pas mieux de placer chaque donnée dans une div à dimension fixe.

Mais pour le tableau, il faut préciser le thead, tfoot et tbody avec une largeur fixe identique pour chaque colonne. Actuellement, je n'ai pas vu le thead, ce qui ne permet pas d'aligner les en-têtes de chaque colonne.
Pour l'alignement vertical, la propriété vertical-align: middle, quoique ancienne, était fort efficace.

[zoohayr]

Bonjour miss socrates,

Merci mille fois pour votre attention d'abord et pour votre réponse ! ça m'a résout presque le problème mais avec une <td> à dimension fixe. Quand à la balise thead, elle se répète avec les tableaux que j'arrive plus à les convertir en un seul au lieu de plusieurs. voici le nouveau code :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 <div class="responsive rt">
    <table>
	<thead>
      <tr>
         <th>Nom</th>
         <th>Prix</th>
         <th>Remboursement</th>
		 <th>Disponibilité</th>
      </tr>
   </thead>
    <tbody>
	    <tr>
 
 
 
			<?php if(isset($this->item->editLink)): ?>
			<!-- Item edit link -->
			<span class="catItemEditLink">
				<a data-k2-modal="edit" href="<?php echo $this->item->editLink; ?>">
					<?php echo JText::_('K2_EDIT_ITEM'); ?>
				</a>
			</span>
			<?php endif; ?>
 
	  	<?php if ($this->item->params->get('catItemTitleLinked')): ?>
		<ul>
		<td width="50%"> <li> <h5 class="catItemView">	<a href="<?php echo $this->item->link; ?>">
	  		<?php echo $this->item->title; ?>
	  	</a>
	  	<?php else: ?>
	  	<?php echo $this->item->title; ?>
	  	<?php endif; ?></li></h5> </td>
 
 
 
 
            <td width="20%">  <li><?php echo $this->item->extraFields->PPVDh->value ;?><?php echo $this->item->extraFields->Tlephone->value ;?></li> </td> 
            <td width="30%" align="center"> <li><?php echo $this->item->extraFields->Remboursement->value ;?><?php echo $this->item->extraFields->PVC->value ;?><?php echo $this->item->extraFields->Ville->value ;?></li></td> 
            <td width="30%" align="center"> <li><?php echo $this->item->extraFields->Disp->value ;?></li> </td> 
 
 
          </ul>
 
		  </tr>
 
		  </tbody>
		  </table>
		  </div>

résultat en ligne : https://www.medika.ma/medicamenta

[psychadelic]

en fait ce que tu recherche à faire c'est une table responsive ?, comme ici => https://css-tricks.com/examples/Resp...responsive.php