28172 sujets

CSS et mise en forme, CSS3

[Résolu]Pbs de bordures et background dans une structure display:table

Bonjour,

je dois réaliser un formulaire de saisie dynamique qui affiche les champs au fur et à mesure.
Dans un premier temps, l'utilisateur saisit la date, ensuite le champ nom apparait, puis le prénom, etc...

Que j'utilise un tableau et des div, j'ai le même problème.
Voici ma structure :


<div id="tab">
	<div class="row">
		<div class="label">Date</div>
		<div class="data">mardi 6 mars 2013</div>
	</div>
	<div class="row">
		<div class="label">Nom</div>
		<div class="data"><input type="text" id="inp_nom"/></div>
	</div>
	<div class="row">
		<div class="label">Prénom</div>
		<div class="data"><input type="text"  id="inp_prenom"/></div>
	</div>
</div>


ma feuille de style :

#tab {
	display:table;
	width:98%;
	
	margin: 10px 10px 10px 10px;
	border:solid 1px #D1D1D1;
	border-radius: 10px;
	background-color:#FEDD98;
	
	table-layout:auto;
	empty-cells:hide;
	border-collapse:separate;
}
.row
{
	display:table-row;
	height:28px;
}
.label
{
	display:table-cell;
	min-width:110px;
	border-bottom: 1px solid #D1D1D1;
	border-right: 1px solid #D1D1D1;
	padding:8px 10px 0 10px;
	color:#000000;
	font-size:12px;
	font-weight:bold;
	font-family:arial;
	vertical-align:top;
}
.data
{
	display:table-cell;
	background-color:#FFFFFF;
	width:100%;
	border-bottom: 1px solid #D1D1D1;
	padding:0px 10px 0px 10px;
	vertical-align:middle;
	color:#000000;
	font-size:13px;
	font-family:arial;
}


Voici le résultat :
upload/48195-div.png

Comme vous le voyez, à droite, le background passe par dessus les coins arrondis.
J'ai aussi la bordure du bas du tableau qui déborde à gauche et à droite.

Y'a t'il une solution pour éviter ces débordements ?

merci
Modifié par gaston (15 Apr 2013 - 10:30)
Bonjour,

voici une solution à votre problème:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3 colonnes fluides</title>
<style>
#tab {
	display:table;
	width:98%;
	margin: 10px 10px 10px 10px;
	border:solid 1px #D1D1D1;
	border-radius: 10px;
	background-color:#FEDD98;
	table-layout:auto;
	empty-cells:hide;
	border-collapse:separate;
}
.row
{
	display:table-row;
	height:28px;
}
.label
{
	display:table-cell;
	min-width:110px;
	border-right: 1px solid #D1D1D1;
	padding:8px 10px 0 10px;
	color:#000000;
	font-size:12px;
	font-weight:bold;
	font-family:arial;
	vertical-align:top;
}
.data
{
	display:table-cell;
	background-color:#FFFFFF;
	width:100%;
	padding:0px 10px 0px 10px;
	vertical-align:middle;
	color:#000000;
	font-size:13px;
	font-family:arial;
	postion:relative;
	left:-20px;
}
.border
{
	border-top: 1px solid #D1D1D1;
	border-bottom: 1px solid #D1D1D1;
}
.bordtop{
	border-radius:0 10px 0 0;
}
.bordbot{
	border-radius:0 0 10px 0;
}
</style>
</head>
<body>
<div id="tab">
	<div class="row">
		<div class="label">Date</div>
		<div class="data bordtop">mardi 6 mars 2013</div>
	</div>
	<div class="row">
		<div class="label border ">Nom</div>
		<div class="data border"><input type="text" id="inp_nom"/></div>
	</div>
	<div class="row">
		<div class="label">Prénom</div>
		<div class="data bordbot"><input type="text"  id="inp_prenom"/></div>
	</div>
</div>
</body>
</html>
Ceci est un défaut, qu'ont ne peut pas réellement corrigé.
Cependant, tu utilise un element formaté en table-row, ce qui te permet d'appliquer a #tab un formatage(display) de type block ou inline-block à la place de table.

http://dabblet.com/gist/5356906
Modifié par gc-nomade (10 Apr 2013 - 19:57)
merci à tous les deux.
Je retiens la solution de gc-nomade car comme ma saisie est dynamique, je ne sais pas quelle sera ma première et dernière ligne du tableau.
Le display:block et aussi le overflow:hidden me permettent de cacher les éléments internes qui dépassent.
Pour compléter la solution, j'ai placé le border-bottom: 1px solid #D1D1D1; dans la classe row
(donc supprimer cette propriété dans label et data) et ajouter la classe suivante qui permet de ne plus avoir la double bordure en bas du tableau.

#tab .row:last-child
{
	display:table-row;
	height:28px;
	border-bottom: 0;
}


Et j'ai passé la propriété border-collapse à collapse à la place de separate.
Modifié par gaston (11 Apr 2013 - 09:58)
Sujet clos
Aller à