web-dev-qa-db-fra.com

Comment arrêter le redimensionnement d'une table lorsque le contenu augmente?

J'ai une table dont les cellules sont remplies d'images. J'aimerais que les images grossissent lorsque vous les survolez et que les cellules du tableau restent à la même taille. 

Changer le style img en position:relative ne fonctionne pas. Le changer en position:absolute fonctionne, mais je ne connais pas la position absolue des images. 

Existe-t-il une solution élégante à ce problème en utilisant CSS? Je préfère ne pas utiliser de JavaScript. 

26
Maarten

Utilisez style="table-layout:fixed;", mais le texte ou les images se chevaucheront avec d'autres colonnes au cas où il dépasserait la largeur. Assurez-vous de ne pas placer de phrases longues sans espaces.

61
Alex G de A

Utilisez table-layout: fixed pour votre tableau et une largeur fixe pour le tableau lui-même et/ou ses cellules.

10
Marat Tanalin

Utilisez min-width dans vos cellules, regardez un exemple ici

.cell1{
display:table-cell;
width:100px;
min-width:100px;
border: 2px dashed #40f;    
}

http://jsfiddle.net/Gueorguip13/avzuadhp/3/

7
Gueorgui

Ajoutez vertical-align:top aux éléments td.

1
brains911

Vous pouvez faire pour vous pouvez utiliser position, z-index, gauche, en haut.

vous devriez regarder de cette façon,

http://jsfiddle.net/wWTfs/

1
sinanakyazici