inline-block dans tableau

**poitierjohan** · 25/08/2013, 09h44

Bonjour à tous,
Je rencontre un problème depuis vendredi alors que je n'ai touché à rien !
Subitement, mes tableau html dont certaines colonnes sont en largeur 1% avec la propriété nowrap active.
A l'affichage dans le navigateur, j'ai maintenant un saut de ligne !!!
La propriété nowrap ne fait pas sont effet.
Ca n'arrive que lorsque j'utilise des lien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table width="100%">
<tr>
<td nowrap="nowrap" width="1%"><b>1.</b></td>
<td nowrap="nowrap" width="1%"><a href="monlien.php">Supprimer</a><a href="monline2.php">Element à afficher</a>
</td>
<td width="98%" nowrap="nowrap">email du contact</td>
</tr>
</table

Jeudi, cela fonctionnait sans aucun problème ! Et depuis (il me semble qu'une mise à jour Google Chrome s'est faite)... problème...

Merci pour votre aide à tous !

**Muchos** · 25/08/2013, 21h59

L'attribut NOWRAP a l'air daté de HTML 3.2 ! Je pense que c'est complètement dépassé.
Testez avec la propriété CSS WHITE-SPACE.

**poitierjohan** · 25/08/2013, 23h27

Bonjour,
MErci pour la réponse, malheureusement mon problème reste identique.
Voici mon code issu de ma page :

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
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tbl_liste_avec_titre">
  <tr class="titre_tableau">
    <td width="1%" nowrap="nowrap"></td>
    <td width="1%"></td>
    <td width="29%">Date</td>
    <td width="69%">Titulaire</td>
  </tr>
	<?php
	$i=0;
	$res = mysql_query("SELECT * FROM programme WHERE ID_etablissement='".$_COOKIE['ID_etablissement']."' AND annee_scolaire='".$_COOKIE['annee_scolaire']."' AND titre!='' AND del='0000-00-00' ORDER BY dat DESC");
	while ($row = mysql_fetch_array($res))
		{
			$i++;
			?>
            <tr>
            <td width="1%" valign="middle" nowrap="nowrap"><strong><?php echo $i ?>.</strong></td>
            <td width="1%" valign="middle" style="white-space:nowrap;">
            	<div class="grouped">
<?php //LE PROBLEME EST ICI : CSS issu de http://adamwhitcroft.com/lab/css3-gmail-buttons/ ?>
               	  <a href="#" class="bttn red icon delete" onclick="javascript:return(confirm('Supprimer cet élément ?'));">Supprimer</a>
               	  <a href="#"" class="bttn blue icon print">Imprimer</a>
                  <a href="#" class="bttn yellow icon edit">TITRE</a>
              </div>
            </td>
            <td width="29%" valign="middle">DATE FROM MYSQL</td>
            <td width="69%" valign="middle">TITULAIRE FROM MYSQL</td>
            </tr>
            <?php
		}
	?>
</table>

Que ce soit avec white-space ou nowrap, l'un et l'autre ne fonctionne pas dans le <div class="grouped">...</div>
Les 3 liens <a href=""> sont sur 2 lignes !

Le css "grouped" a la propriété "display:inline-block;"

Merci...

**poitierjohan** · 27/08/2013, 22h27

Le problème que les 2 liens <a href=""> ayant une class="bttn" soivent être sur une seule ligne dans ma colonne (width='1%").
Or depuis jeudi, ce n'est plus le cas. La propriété nowrap est appliquée. Sans succès.

Voici le code du tableau :
Bien entendu, il y d'autres colonnes faisant un total de largeur 100%...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table width="100%">
<tr>
<td width="1%" nowrap="nowrap">
<div class="grouped">
<a href="#" class="bttn">Texte</a>
<a href="#" class="bttn">Texte</a>
</div>
</td>
<tr>
</table>

Je précise que j'ai également essayer le CSS style="white-space:nowrap"... pas changement.
De plus, avec du texte normal, pas de saut ligne, le nowrap fonctionne normalement.

Voici le CSS "bttn" et "grouped"

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
.bttn {
	text-decoration: none;
	cursor: pointer;
	padding: 0 8px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	outline: 0;
	color: #000000;
	background-color: #f5f5f5;
	background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
	background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
	background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
	border: 1px solid #d9d9d9;
	border: 1px solid rgba(0,0,0,0.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
 
.grouped {
	display:inline-block;
	list-style:none;
	padding:0;
	margin:0;
}

Merci pour votre aide précieuse !

**Afaf001** · 27/08/2013, 23h47

Bonjour,
J'ai pas très bien saisi le problème. chez moi ton code marche bien, ça donne les 2 boutons sur la meme ligne, quoique ce soit la longueur du texte du bouton
Mais si par exemple, tu mets :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="#" class="bttn">Texte <br/> Texte</a>
<a href="#" class="bttn">Texte</a>

au lieu de 'Texte' tout court, bah c'est normal que tu vas pas les avoir sur la meme ligne, c'ext à cause de la propriété 'height' que t'as fixé à 30px. essaie un peu de l'enlever. tu auras peut etre tes boutons sur la meme ligne

**rodolphebrd** · 28/08/2013, 00h08

Bonjour,

je ne vois pas le problème dans ce que vous énoncer.

Il manque certainement une partie du code.

Une page en ligne serait la bienvenue.

Invité · 28/08/2013, 06h25

bonjour,
essaie sans passage à la ligne dans le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="bttn">Texte</a><a href="#" class="bttn">Texte</a>

Sinon, idem, je n'ai pas constaté ce problème.
nowrap="nowrap" semble faire son travail.

Envoyé par poitierjohan

Bien entendu, il y d'autres colonnes faisant un total de largeur 100%...

Il faudrait nous montrer une ligne complète.

Aussi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.grouped {
	padding:0;
	margin:0;
}

**poitierjohan** · 28/08/2013, 10h22

Bonjour à tous,

Merci pour vos réponse, je vais voir ça tout de suite.

Je vous mets en pièce jointe une capture d'écran du résultat...
Je n'ai ce résultat sur 2 lignes QUE dans des tableaux !

Dès que j'ai essayé vos propositions, je reviens.

MErci

Invité · 28/08/2013, 10h30

Pourquoi ne pas les mettre dans 2 cases ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td width="1%">
  <a href="#" class="bttn">Supprimer</a>
</td>
<td width="1%">
  <a href="#" class="bttn">Texte</a>
</td>

Ça résout le problème.

**poitierjohan** · 28/08/2013, 10h36

Envoyé par jreaux62

Pourquoi ne pas les mettre dans 2 cases ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td width="1%">
  <a href="#" class="bttn">Supprimer</a>
</td>
<td width="1%">
  <a href="#" class="bttn">Texte</a>
</td>

Ça résout le problème.

En effet, mais la class GROUPED permet alors d'avoir un ensemble de bouton à celui d'extrême gauche et d'extrême droite d'avoir les bords arrondi !

Voici le code CSS de la class GROUPED au complet :

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
38
39
40
41
42
.grouped {
	display:inline-block;
	list-style:none;
	padding:0;
	margin:0;
}
.grouped li {
	float:left;
	margin:0;
	padding:0;
}
.grouped .bttn {
	float:left;
	margin-left:-1px;
}
.grouped li:not(:first-child):not(:last-child) .bttn,
.grouped > .bttn:not(:first-child):not(:last-child) {
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
}
.grouped li:first-child .bttn,
.grouped > .bttn:first-child {
	margin-left:0;
	-webkit-border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;	
	border-top-right-radius:0;
	border-bottom-right-radius:0;			
}
.grouped li:last-child .bttn,
.grouped > .bttn:last-child {
	-webkit-border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;	
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

Invité · 28/08/2013, 13h16

On attend toujours un extrait HTML CONCRET de la <table> (quelques lignes suffisent, mais avec TOUS les <td>), pour pouvoir TESTER.

Ou un lien en ligne.

**poitierjohan** · 28/08/2013, 13h22

Voici :

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
 
<table id="tbl_liste" width="100%" border="1" cellspacing="0" cellpadding="0">
 
        <tr style="vertical-align:middle;">
        <td width="1%" nowrap="nowrap">
        	<strong>1.</strong>
        </td>
        <td width="1%" nowrap="nowrap">
        	<div class="grouped">
            	<a href="#" class="bttn">Supprimer</a>
                <a href="#" class="bttn">User 1</a>
                </div>
        </td>
        <td width="1%" valign="middle" nowrap="nowrap">num tel</td>
        <td width="97%" align="right">mail...</td>
        </tr>
        <tr style="vertical-align:middle;">
        <td width="1%" nowrap="nowrap">
        	<strong>2.</strong>
        </td>
        <td width="1%" nowrap="nowrap">
        	<div class="grouped">
            	<a href="#" class="bttn">Supprimer</a>
                <a href="#" class="bttn">User 2</a>
                </div>
        </td>
        <td width="1%" valign="middle" nowrap="nowrap">num tel</td>
        <td width="97%" align="right">mail...</td>
        </tr>
        <tr style="vertical-align:middle;">
        <td width="1%" nowrap="nowrap">
        	<strong>2.</strong>
        </td>
        <td width="1%" nowrap="nowrap">
        	<div class="grouped">
            	<a href="#" class="bttn">Supprimer</a>
                <a href="#" class="bttn">User 3</a>
                </div>
        </td>
        <td width="1%" valign="middle" nowrap="nowrap">num tel</td>
        <td width="97%" align="right">mail...</td>
        </tr>
 
</table>

**rodolphebrd** · 28/08/2013, 13h46

Le plus simple serait de passer la largeur de la cellule à 7% non ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 ...<td width="7%" nowrap="nowrap">
        	<div class="grouped">
            	<a href="#" class="bttn">Supprimer</a>
            <a href="#" class="bttn">User 1</a>...

**poitierjohan** · 28/08/2013, 13h47

C'est en effet une solution...
mais si l'utilisateur réduit sa fenêtre, le pourcentage ne correspondra plus...
Et c'est justement ça que je veux éviter.
MErci.

**rodolphebrd** · 28/08/2013, 13h52

Bon alors dans ce cas il faudra fixer la largeur de votre TD en pixels avec un min-width puisque vous ne voulez pas qu'elle bouge.
http://codepen.io/anon/pen/hwosm

**poitierjohan** · 28/08/2013, 13h55

J'y ai pensé aussi...
mais un détail, le contenu du 2e lien "User 1" est le nom de l'utilisateur... donc de longueur variable...
Je pense que le problème vient du CSS... car partout où j'utilise nowrap, cela fonctionne sans aucun problème.

Or, je n'ai ce problème qu'avec la class GROUPED (ou BTTN)...
Serait-ce la propritété display:inline-block qui ferait défaut ?

MErci

Invité · 28/08/2013, 13h55

Yop.
C'est le <div class="grouped"> qui pose problème.

PLUS PRECISEMENT :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.grouped .bttn {
    float: left;
}

Mon interprétation :

Le float-left "sort l'élément du flux.
Or, le <td> A BESOIN de calculer la largeur du contenu pour s'y adapter.
Ce qu'il ne peut pas faire à cause du float:left.

DONC :

SOIT supprimer ce float: left;
SOIT (s'il est nécessaire ailleurs) faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
        <td width="1%" nowrap="nowrap">
        <span class="grouped-span">
            	<a href="#" class="bttn">Supprimer</a><a href="#" class="bttn">User 1</a>
            </span>
        </td>

En ajoutant dans le CSS :

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
21
.grouped-span > .bttn:first-child,
.grouped li:first-child .bttn,
.grouped > .bttn:first-child {
	margin-left:0;
	-webkit-border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;	
	border-top-right-radius:0;
	border-bottom-right-radius:0;			
}
.grouped-span > .bttn:last-child,
.grouped li:last-child .bttn,
.grouped > .bttn:last-child {
	-webkit-border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;	
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

**poitierjohan** · 28/08/2013, 14h00

Merci beaucoup jreaux62
Je retrouve mes 2 liens sur la même ligne...

Peux-tu m'expliquer la raison du problème alors qu'il y a 1 semaine cela fonctionnait correctement ?

Seulement, voici un autre problème qui en découle... Cf. pièce jointe... il a débordement des lien sur la seconde cellule...
Cale survient soit en enlevant "float:left" soit en ajoutant et modifiant la class css

MErci jreaux62