28173 sujets

CSS et mise en forme, CSS3

Tableaux "excel like" [Résolu]

Bonjour !
Je souhaiterais faire un tableau dont chaque case contient des balises input text.
Dans ce style:

<table>
<tr>
<td><input type="text" class="maclasse" name="c1"></td>
<td><input type="text" class="maclasse" name="c2"></td>
</tr>
</table>

Pour que ce soit Joli, j'amerais que le champ input prenne exactement la taille de la cellule, afin d'avoir un effet "excel" sur le tableau.
Or je n'y parviens pas, j'ai essayé notament:

<style>
.maclasse {
width:100%;
height:100%;
}
</style>

Cela marche tres bien pour la largeur, mais pas pour la hauteur.

Quelqu'un a-t-il une idée ??
Bien à vous
Manu
Modifié par manoux (30 Nov 2007 - 11:20)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Peut-être en passant les input en display: block? Et en donnant une hauteur précise aux cellules du tableau.

Mais il faut savoir que styler les éléments de formulaire est rarement évident. Et obtenir le même résultat dans tous les navigateurs est généralement impossible.
Lire à ce sujet:
http://blog.alsacreations.com/2007/06/12/366-comment-ne-pas-styler-les-elements-de-formulaire

Un petit test tout de même:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	td {
		height: 50px;
		width: 200px;
		background: #ccc;
		border: solid 1px black;
	}
	input {
		display: block;
		height: 100%;
		width: 100%;
		background: burlywood;
		border: none;
	}
	</style>
</head>

<body>

<table>
	<tr>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
		<td>
			<input type="text" />
		</td>
	</tr>
</table>

</body>
</html>

Le height: 100% ne prend pas avec IE6, mais fonctionne avec Firefox et Opera. On peut aussi envisager de donner une hauteur ou une hauteur minimale en pixels ou em aux champs de formulaire.
Merci Florent.
Effectivement ça marche bien avec op et ff.

Sinon une autre solution en terme d'esthétisme est de définir la couleur de fond du input de celle de la cellule et de supprimer les bords, l'utilisateur ne voit pas la différence. Même si c'est une "tricherie"

En te remerciant encore une fois

[Hors sujet:] Comment fait-t-on pour fermer un topic en "résolu" ?
Modifié par manoux (30 Nov 2007 - 09:42)
Sujet clos
Aller à