table
nada …
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 :
1 |
.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; } |
- Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.
- Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.
1 2 3 4 5 6 7 8 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 |
img { height: auto; max-width: 100%; } .cell { display: table-cell; } .cell-fluid { width: 100%; } |