Problème largeur de tableau

Sujet résolu

17 septembre 2017 à 0:11:42

Bonjour à tous,

J'ai un gros problème depuis plusieurs jours maintenant, et je ne vois pas comment le résoudre.

Voici le topo :

Dans ma page web, j'ai un div qui prend 100% de la largeur (en bleu ciel).

Dans ce div j'ai un tableau qui contient deux colonnes, la première contient du texte, et la deuxième contient 4 icones.

La deuxième colonne doit contenir les icones sur la même ligne sans jamais faire de retour à la ligne, j'ai donc ajouté un "white-space:nowrap" au TD, et ça fonctionne.

Mon tableau ne doit pas dépasser 50% de la largeur totale du div parent. C'est là qu'est mon soucis ... ma galère ... mon enfer ... bon j’arrête.

Je souaiterai que quand la première colonne contient beaucoup de texte, le tableau entier reste bloqué à 50% de la largeur disponible, et ça fonctionne :

Par contre quand la colonne ne contient qu'un mot par exemple, je souaiterai que la colonne s'adapte au texte, et qu'il n'y ait pas d'espace après, mais là ça ne fonctionne pas :

En gros je souaiterai que mon tableau s'adapte au contenu, mais qu'il ne puisse pas dépasser 50% de ma page, sachant que je ne connaitrais jamais les dimensions du div parent (donc pas possible de fixer le nombre de pixels, et pour le tableau non plus, je dois tout faire en pourcentages).

Voici le code de ma page html :

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">

	<style>

		div, p, h1, h2, h3, img, table, tr, td, br, span, table { margin: 0px; padding: 0px; }
		table { border:none; border-collapse:collapse; }
		td { border:none; }

		.tdLibelle {
			padding-left: 5px;
			padding-right: 5px;
		}

		.tdNiveau {
			width:1%;
			white-space: nowrap;
			padding-left: 5px;
			padding-right: 5px;
		}

	</style>

</head>

<body>

<div style="background-color: #dffcff; width: 100%; padding: 20px; min-height: 50px;">

		<table style="width: 50%; background-color: #00AA33">

			<tr>
				<td class="tdLibelle" style="background-color: #83d294">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</td>

				<td class="tdNiveau" style="background-color: #cba8d2;">
					<i class="fa fa-circle" aria-hidden="true"></i>
					<i class="fa fa-circle" aria-hidden="true"></i>
					<i class="fa fa-circle-o" aria-hidden="true"></i>
					<i class="fa fa-circle-o" aria-hidden="true"></i>
				</td>

			</tr>

			<tr>
				<td class="tdLibelle" style="background-color: #d2bd8e">ipsum ipsum</td>

				<td class="tdNiveau" style="background-color: #78ced2;">
					<i class="fa fa-circle" aria-hidden="true"></i>
					<i class="fa fa-circle" aria-hidden="true"></i>
					<i class="fa fa-circle-o" aria-hidden="true"></i>
					<i class="fa fa-circle-o" aria-hidden="true"></i>
				</td>

			</tr>

		</table>

	</div>

</body>

</html>

Merci d'avance aux personne qui pourront tenter de me sortir de là !

Anonyme

17 septembre 2017 à 0:27:51

Hello,

Tu peux toujours mettre un span dedans et donc mettre ta CSS dessus.

Lamecarlate

17 septembre 2017 à 8:17:35

Bonjour,

déjà, mettre tout ça dans un fichier CSS externe c'est mieux

Ensuite, tu peux utiliser "max-width: 50%".

Pas d'aide concernant le code par MP, le forum est là pour ça :)

0vordhosbn00

17 septembre 2017 à 8:58:15

Salut 4N42K1, je ne vois pas trop où tu veux que je mette mon span, et ce que je dois mettre dedans.

Lamecarlate, merci mais le soucis c'est plutot quand il n'y a qu'un mot dans la colonne de gauche, et dans ce cas je voudrais qu'il n'y ait pas tout cet espace à droite du texte, comme montré sur la deuxième capture d'écran. Et puis un max-width ça ne fonctionne ni sur les éléments <table> ni sur les <td>... pareil pour min-width du coup.

Anonyme

17 septembre 2017 à 11:49:56

Bonjour,

En fait, il est préférable de ne pas utiliser les max-width avec les tableaux car comme tu le dis ca marche pas bien. Je complète la réponse de Lamecarlate en disant qu'il faut que tu mettes ton tableau dans une autre div qui elle aura "max-width:50%"

-
Edité par Anonyme 17 septembre 2017 à 11:50:19

Lamecarlate

17 septembre 2017 à 12:13:58

> Et puis un max-width ça ne fonctionne ni sur les éléments <table> ni sur les <td>... pareil pour min-width du coup.

Ah ? https://codepen.io/lamecarlate/pen/PJPJzx

Sur les td, oui, en effet, puisqu'on est dans un contexte particulier, mais pour les tables, absolument aucun souci.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

0vordhosbn00

17 septembre 2017 à 21:51:54

Ok merci à tous, problème résolu. Désolé Lamecarte, j'ai parlé trop vite, on fait mon max-width était interprété comme un width à cause de mon "width: 1%" au niveau du td. Je l'ai jarté et du coup ta solution marche nikel. Et puis merci d'avoir pris le temps de me montrer un bout de code c'était sympa de ta part.

Vraiment merci car j'était pas loin de devenir cinglé :honte: ...

Lamecarlate

17 septembre 2017 à 22:09:49

Pas de souci

Le code, c'est le meilleur langage pour montrer quelque chose, ici, donc c'était normal de ma part.

Bonne continuation !

Pas d'aide concernant le code par MP, le forum est là pour ça :)