html - How to stop table from resizing when contents grow?

Question

I have a table, the cells of which are filled with pictures. I would like the pictures to grow larger when you hover over them and I would like the cells of the table to remain at the same size.

Changing the img style to position:relative doesn't work. Changing it to position:absolute does work, but I don't know the absolute position of the images.

Is there an elegant solution to this problem using CSS? I'd rather not use any JavaScript.

Answer 1

Use style="table-layout:fixed;", but this will make text or images overlap with other columns in case it exceed the width. Make sure not to place long text phrases without spaces.