CSS Alignement dans un tableau

Résolu

jobouille Messages postés 356 Statut Membre -
jobouille Messages postés 356 Statut Membre - 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

Afficher la suite

A voir également:

CSS Alignement dans un tableau
Tableau word - Guide
Trier un tableau excel - Guide
Tableau ascii - Guide
Imprimer un tableau excel - Guide
Tableau croisé dynamique - Guide

1 réponse

Réponse 1 / 1

animostab Messages postés 3003 Statut Membre 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%;
}

jobouille Messages postés 356 Statut Membre 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 :)

jobouille Messages postés 356 Statut Membre 10

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

Encore merci et bonne soirée :)

Discussions similaires

Tableau croisé dynamique - absence de certaines données

Formule taux de marque

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

tableaux croisés dynamique

Votre réponse

Discussions similaires