28172 sujets

CSS et mise en forme, CSS3

[resolu] Table-cell + gouttière transparente

Salut,
Je travaille -moi aussi- a ma propre version de Knacss et je suis en train de chercher une solution pour mettre une gouttière transparente entre deux élément qui sont en table-cell.

Après avoir tester tout ce que je connais, je n'ai trouvé qu'une solution très simple à mettre en place mais pas très sémantique. Smiley confus
Elle consiste à placer une balise div inutile entre mes deux éléments, en table-cell et avec une largeur de la gouttière de ma grille.

Existe-il une solution plus propre?
Merci d'avance.
David.
Modifié par David-Dante (22 Nov 2012 - 22:46)
bonjour,

border-spacing serait une piste.

Si tu ne veut pas cette espace sur la pourtour de ton tableau il y a la solution d'un clippage CSS.
Soit en position absolute avec un parent (solution hors du flux , compliqué pour le reste)
soit toujours avec un parent avec le contexte de formatage modifié, un overflow:hidden et des marges négatives.

test avec table et display:table
body {text-align:center;}
body > div {display:table;overflow:hidden;margin:01em auto;}
table , .table {border:solid;margin:auto;border-spacing:1em;margin:-1.2em;background:red}
td , .tbcll {border:solid;padding:1em;background:yellow}
.table {display:table;}
.tr {display:table-row;}
.tbcll {display:table-cell;}


<body>
<div><table>
<tr><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</div>
<div> 
<section class="table">
<article class="tr"><p class="tbcll">cell</p><p class="tbcll">cell</p><p class="tbcll">cell</p></article>
<article class="tr"><p class="tbcll">cell</p><p class="tbcll">cell</p><p class="tbcll">cell</p></article>
<article class="tr"><p class="tbcll">cell</p><p class="tbcll">cell</p><p class="tbcll">cell</p></article>
<article class="tr"><p class="tbcll">cell</p><p class="tbcll">cell</p><p class="tbcll">cell</p></article>
</section>
</body>


Sinon , je ne saisis pas trop ce que tu veut.

Column-count et Cie te permette de faire cette gouttière (gap) entre les colonnes

++
heu, précisiion pour le parent, tu peut utiliser :
display: inline-block/inline-table; /* reagit au text-align; */
ou
display:table; /* réagit a margin:auto; */

de façon a ce qu'il se rétracte sur la largeur de son contenu.
Salut et merci pour vos réponses. Je vais opter pour la position absolute.
Pour l'histoire, pour ma version de Knacss j'ai décidé d'utiliser inline-block + commentaire dans le HTML pour ma grille de mise en page.
Mais dans le cas où j'ai besoin d'avoir des colonnes de mêmes hauteurs, je compte sur table-cell pour remplir cette mission. Il me faut donc un visuel qui donnerai
un élement - une goutière - un élément.

Pour la postérité, voici la solution.


<div class="table">
	<div class="cell fourcol"></div>
	<div class="cell heightcol"></div>
</div>




.fourcol {width: 30.75%;}
.table {
          display: table; 
          table-layout: fixed; 
           width: 100%;
           height: 100px;
           position: relative;
}
.cell {display: table-cell;}
.cell + .cell {position: absolute; top: 0; bottom: 0; right: 0;}
.cell.fourcol + .cell { left: 34.55%; /* 30.75 (width de fourcol) + 3.8 (taille de ma gouttière)*/}


Il ne me reste plus qu'à prévoir les cas de figure les plus courants (sixcol + sixcol, fourcol x3, ...) et un fallback pour IE<8.

++ Smiley cligne

edit: simplification du code avec .cell + .cell au lieu de répéter à chaque fois le même code. Comme ça, on ne précise plus que le décalage à gauche.
Modifié par David-Dante (22 Nov 2012 - 23:28)
Administrateur
David-Dante a écrit :
Pour la postérité, voici la solution.

Hello,

Outre le fait que ta solution soit assez compliquée à maintenir (calculs de gouttières *et* de largeurs), elle a un énorme problème : tu es obligé d'imposer une hauteur au tableau (ici 100px).
En raison de cette hauteur imposée, tous les contenus de plus de 100px de haut vont déborder de ton tableau Smiley ohwell
Raphael a écrit :

Hello,

Outre le fait que ta solution soit assez compliquée à maintenir (calculs de gouttières *et* de largeurs), elle a un énorme problème : tu es obligé d'imposer une hauteur au tableau (ici 100px).
En raison de cette hauteur imposée, tous les contenus de plus de 100px de haut vont déborder de ton tableau Smiley ohwell

Salut,
Oh shit, tu as raison. J'ai fais mes tests sans contenu et je n'aurais pas dû. Le contenu sort de son conteneur. La solution n'était pas sexy à la base mais là, c'est carrément inutile.

Du coup, il ne me reste plus que la création d'un élément factice entre deux éléments en table-cell pour simuler un margin right. C'est assez borderline pour la sémantique mais je ne vois que ça pour créer une gouttière invisible. Smiley ohwell Peut être un défi à lancer sur ton blog. Smiley langue
Sujet clos
Aller à