CSS Alignement dans un tableau

Résolu
jobouille Messages postés 286 Date d'inscription   Statut Membre Dernière intervention   -  
jobouille Messages postés 286 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   738
 
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
jobouille Messages postés 286 Date d'inscription   Statut Membre Dernière intervention   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
jobouille Messages postés 286 Date d'inscription   Statut Membre Dernière intervention   10
 
Non c'est bon en fait j'ait trouvé ^^

Encore merci et bonne soirée :)
0

Discussions similaires

Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses
Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses
generateur de combinaison du loto 5/90
Riccilo -
ccm81 -

3 réponses