table-cell – devfrontend.info

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1	.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

<p>Normal "responsive" image</p>

<p>Image in a display: table-cell</p>

<p>Image in a display: table-cell with width: 100%</p>

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

img {

height: auto;

max-width: 100%;

}

.cell {

display: table-cell;

}

.cell-fluid {

width: 100%;

}

Centrer un texte en hauteur avec CSS, dans un menu horizontal de navigation par exemple…

Simulation : http://jsfiddle.net/frontenddeveloper/Qrz58/16/

.menu li{
    display: table;
    float: left;

    margin: 2px;
}

.menu a{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    
    width: 90px;
    height: 3.6em;
    line-height: 1.2em;
    padding: 5px;
    border: 1px solid #000;
    background: pink;
}

.menu a:hover{
    background: #fff;
}

.menu li{

display: table;

float: left;

margin: 2px;

}

.menu a{

display: table-cell;

vertical-align: middle;

text-align: center;

width: 90px;

height: 3.6em;

line-height: 1.2em;

padding: 5px;

border: 1px solid #000;

background: pink;

}

.menu a:hover{

background: #fff;

}

Une variante : le menu se comporte réellement comme un tableau HTML

Simulation : http://jsfiddle.net/frontenddeveloper/5nkFV/2/

.menu{
    display: table;
    border-collapse: separate;
    border-spacing: 4px 4px;
}

.menu li{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 4em;
    padding: 4px;
    
    background: pink;
    border: 1px solid #000;
}

.menu li:hover{
    cursor: pointer;
    background: #fff;
}

.menu{

display: table;

border-collapse: separate;

border-spacing: 4px 4px;

}

.menu li{

display: table-cell;

vertical-align: middle;

text-align: center;

height: 4em;

padding: 4px;

background: pink;

border: 1px solid #000;

}

.menu li:hover{

cursor: pointer;

background: #fff;

}

Articles récents

Catégories

Archives

Méta

Étiquette : table-cell

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

display: table-cell;

[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle

Une variante : le menu se comporte réellement comme un tableau HTML