Jak zatrzymać zmianę rozmiaru tabeli podczas wzrostu zawartości?

Question

Mam table, którego komórki są wypełnione obrazkami. Chciałbym, aby obrazy się powiększyły, gdy najedziesz na nie kursorem i chciałbym, aby komórki stołu pozostały w tym samym rozmiarze.

Zmiana stylu img na position:relative nie działa. Zmiana na position:absolute działa, ale nie znam bezwzględnej pozycji obrazów.

Czy istnieje eleganckie rozwiązanie tego problemu za pomocą CSS? Wolałbym nie używać żadnego JavaScriptu.

Answer 1

Zastosowanie style="table-layout:fixed;", ale uczyni to tekst lub obrazy pokrywają się z innymi kolumnami w przypadku przekraczać szerokości. Nie umieszczaj długich fraz tekstowych bez spacji.

Answer 2

Dodaj vertical-align:top do elementów td.

Answer 3

Użyj tabeli table-layout: fixed i pewnej stałej szerokości dla samej tabeli i/lub jej komórek.

Answer 4

Możesz zrobić, aby użyć pozycji, z-index, left, top.

należy spojrzeć w ten sposób,

http://jsfiddle.net/wWTfs/

Answer 5

Zastosowanie min szerokości w swoich komórkach, patrzeć Przykładem

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

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