CSS Alignement dans un tableau

Résolu/Fermé
Signaler
Messages postés
286
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
27 septembre 2017
-
Messages postés
286
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
27 septembre 2017
-
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

1 réponse

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
713
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%;
}

1
Messages postés
286
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
27 septembre 2017
10
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 :)
0
Messages postés
286
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
27 septembre 2017
10
Non c'est bon en fait j'ait trouvé ^^

Encore merci et bonne soirée :)
0