CSS Alignement dans un tableau

Résolu/Fermé

jobouille Messages postés 286 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 27 septembre 2017 - 18 avril 2015 à 12:42
jobouille Messages postés 286 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 27 septembre 2017 - 18 avril 2015 à 21:11

Bonjour à tous !

Je viens de créer un petit tableau qui ressemblance à ceci : http://puu.sh/hi3E2/33f19336c2.png

Cependant, vous avez du voir dans la colonne "Produit" rien n'est aligné.
Et c'est pourquoi je fais appel à vous, j'aimerais juste que le texte soit bien aligné et une colonne moins grande.

Voilà le tableau :

<table style="width:500px;">
	<tr>
		<th>Produit</th>
		<th>Prix</th>
		<th>Quantité</th>
		<th>Achat</th>
	</tr>
	<tr>
		<td><img class="img_marche" src="images/epi_ble.png" /><p class="p_marche">Épi de blé</p></td>
		<td>3 Po</td>
		<td>
			<select style=" width:40px;" size="1">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
			</select>
		</td>
		<td><input type="submit" name="Achat" value="Acheter" /></td>
	</tr>
	<tr>
		<td><img class="img_marche" src="images/epi_mais.png" /><p class="p_marche">Épi de maïs</p></td>
		<td>3 Po</td>
		<td>
			<select style=" width:40px;" size="1">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
			</select>
		</td>
		<td><input type="submit" name="Achat" value="Acheter" /></td>
	</tr>
</table>

Et voilà le CSS :

<style type="text/css">

	table
	{
		border-collapse: collapse; 
		margin : 10px auto auto auto;
		text-align: center;
		border:1px solid black;
	}
	
	th{
		background: #4cb400;
	}
	
	tr:nth-child(odd){ 
		background: #9cff53;
	}
	
	tr:nth-child(even){
		background: #c9ffa1;
	}

	.img_marche {
		height:60px;
		vertical-align:middle;
		float:left;
		display:inline-block;
	}

	.p_marche {
		display:inline-block;
		float:left;
		margin-left:20px;
	}

</style>

Merci et bonne journée :D

A voir également:

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
18 avril 2015 à 13:34

Salut
il faut bien sur que les 2 images (blé et maïs) aient la même largeur sinon ca décale le texte
sinon tu met les images dans une div avec taille fixe en px et le texte dans une autre avec des display inilne-block.

pour la largeur des colonnes tu applique un width dans le css en mettant une class à la colonne


<th class="1ercol">Produit</th>
....
<td class="1ercol"><img class="img_marche" ......

.1ercol{
width:xxx%;
}

jobouille Messages postés 286 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 27 septembre 2017 10
18 avril 2015 à 14:06

Effectivement c'était les images qui avaient des largeurs différentes, finalement c'était tout bête ^^

Puisque j'y suis j'aurais encore besoin de votre aide :

Cette fois j'aimerais aligné verticalement afin que ça soit plus "agréable" à voir :
(c'est une autre page) : http://puu.sh/hi6MX/6e02a780dd.jpg

Voici le code HTML :

<div style="display:inline-block">
					<img title="Vous avez <?php echo $user['Ble']; ?> épis de Blé!" class="img_grange" src="images/epi_ble.png"><span title="Vous avez <?php echo $user['Ble']; ?> épis de Blé!" ><?php echo $user['Ble']; ?></span><br />
					<form method="POST" action="">
						<input class="input_grange" type="number" name="nbrBle" min="0" value="0"/><br />
						<input style="margin-top:5" type="submit" name="jeterBle" value="Jeter" /><br />
						<input title="2Po/u" style="margin-top:5" type="submit" name="vendreBle" value="Vendre" />
					</form>
				</div>
				<div style="display:inline-block">
					<img title="Vous avez <?php echo $user['Mais']; ?> épis de Maïs!" class="img_grange" src="images/epi_mais.png"><span title="Vous avez <?php echo $user['Mais']; ?> épis de Maïs!" ><?php echo $user['Mais']; ?></span><br />
					<form method="POST" action="">
						<input class="input_grange" type="number" name="nbrMais" min="0" value="0"/><br />
						<input style="margin-top:5" type="submit" name="jeterMais" value="Jeter" /><br />
						<input title="2Po/u" style="margin-top:5" type="submit" name="vendreMais" value="Vendre" />
					</form>
				</div>

Et le CSS :

.img_grange {
	height:60px;
	margin: 0 5 0 50;
	vertical-align:middle;
}

.input_grange {
	width : 50px;
	margin-left: 20;
}

Encore merci de votre aide :)

jobouille Messages postés 286 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 27 septembre 2017 10
18 avril 2015 à 21:11

Non c'est bon en fait j'ait trouvé ^^

Encore merci et bonne soirée :)

Discussions similaires

ou sont les bananes ?

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Tableau croisé dynamique avec plusieurs en-têtes identiques

Bibliothèque

Trouver le nom d'un tableau avec sa photo.

Discussions similaires

Newsletters