28220 sujets

CSS et mise en forme, CSS3

Tableau dans un tableau...

Bonjour,

Il sagit bien là de vrais et bons tableaux de données (et non pas un soucis de mise en page avec de tableaux Smiley cligne )
De plus je n'ai pas la main sur la création du code source (tableaux emboités)... je dois donc malheureusement faire avec (des fusions de lignes auraient résolu ce soucis)

Un exemple :
<table><tbody><tr>
                           <td width="20%">rerer</td>
                           <td width="20%" colspan="4">
                              <table width="100%"><tbody><tr>
                                    <td width="25%">rer</td>
                                    <td width="25%">ere</td>
                                    <td width="25%">re</td>
                                    <td width="25%">erer</td>
                                 </tr><tr class="">
                                    <td width="25%">rer</td>
									<td width="25%">er</td>
                                    <td width="25%">ere</td>
                                    <td width="25%">o</td>
                                 </tr></tbody></table>
                           </td>
                        </tr><tr>
                           <td width="20%">ere</td>
                           <td width="20%">er</td>
                           <td width="20%">o</td>
                           <td width="20%">rer</td>
                           <td width="20%">erer</td>
                        </tr></tbody></table>


un extrait de ma feuille de style :
table{
	border-collapse:collapse;
}

td {
	border:thin solid #000;
	padding:10px;
	
}
table table {
	width:100%;
	margin:-10px;
}

td > table {
	border:hidden;
}


Mon problème : j'ai un intervalle après le tableau imbriqué... le même code sans les % (là aussi je dois faire avec) et je n'ai plus ce soucis... avec les %, le navigateur conserve la taille du tableau du au padding de la cellule parente (le margin:-10px est sans effet)

Merci
Bonjour ikan,

Il « suffit » de supprimer cette marge négative très mal venue sur le second tableau pour que les choses rentrent dans l'ordre.

Voici ma version de test, avec grosso modo le rendu voulu (il suffit alors de supprimer le padding sur la cellule qui accueille le deuxième tableau pour éviter des retraits) :
<!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">
	table{
		border-collapse:collapse;
	}
	td {
		border:thin solid #000;
		padding: 10px;
		width: 20%;
	}
	td td {
		width: 25%;
	}
	table table {
		width:100%;
	}
	td > table {
		border: hidden;
	}
	</style>
</head>

<body>
<table>
<tbody>
	<tr>
       <td>rerer</td>
       <td style="padding: 0;" colspan="4">
          <table style="width: 100%;">
          <tbody>
             <tr>
                <td>rer</td>
                <td>ere</td>
                <td>re</td>
                <td>erer</td>
             </tr>
             <tr>
                <td>rer</td>
				<td>er</td>
                <td>ere</td>
                <td>o</td>
             </tr>
          </tbody>
          </table>
       </td>
    </tr><tr>
       <td>ere</td>
       <td>er</td>
       <td>o</td>
       <td>rer</td>
       <td>erer</td>
    </tr>
</tbody>
</table>
</body>
</html>


À noter qu'il peut se produire (et qu'il se produira nécessairement) de légers décalages, d'un ou deux pixels, entre les bordures du premier tableau et celles du deuxième tableau. C'est dû à la gestion par les navigateurs du dimmensionnement relatif en pourcentages, qui ne permet pas des alignements au pixel près (mais pas sûr que des largeurs fixes en pixels soient plus efficaces, à vrai dire).

Je m'interroge cependant sur les raisons de ce bidouillage. Pourquoi pas tout simplement un rowspan sur la cellule en haut à gauche ?
mpop a écrit :
Au passage, est-ce que border: hidden est vraiment valide ? Smiley confus


merci pour la réponse et la proposition

1) border:hidden
Je pensais supprimer le contour du tableau imbriqué (valide, je ne sais pas... mais efficace avec Firefox, IE pas sûr). border-collapse:collapse n'empèche pas la superposition du contour de la cellule et du tableau imbriqué.

Serait-il possible alors de supprimer le coutour de la cellule contenant le tableau ? J'avoue ne pas avoir trouvé de solution...

2) comme je l'ai précisé précedemment, il est évident qu'un rowspan aurait bien simplifié le travail... malheureusement je travaillle sur un XML issue du traitement d'une chaîne de conversion... (d'ailleurs le XML issue d'open office semble gérer les fusions de lignes de la même façon - fusion de ligne = nouveau tableau) et j'essaye de faire avec. Smiley decu

sinon mon -10px (pas très éléguant !) permettait aussi d'avoir le même résultat, mon soucis proviens du fait que le code dont j'hérite comprend déjà les % (<td width="25%">) et avec eux ma présentation n'est plus conforme (différence lorsque les tailles sont fixées dans la css)

encore merci mpop
Autre question...

est-il possible via la css d'avoir une influence uniquement sur les cellules qui contiennent un tableau ?

S'il est possible d'intervenir sur le tableau présent dans une cellule (td > table), peut-on faire le chemin inverse, au lieu d'agir sur les "enfants" remonter vers les "parents", un before ?

merci
ikan a écrit :
S'il est possible d'intervenir sur le tableau présent dans une cellule (td > table), peut-on faire le chemin inverse, au lieu d'agir sur les "enfants" remonter vers les "parents", un before ?

Non, c'est impossible en CSS. On ne peut pas sélectionner un élément en fonction de ce qu'il contient.
Il faudra passer par une classe, si possible.
merci,

je crois que le plus simple est de trouver une solution du côté de la création du XML...
Sujet clos
Aller à