How to prevent a single row of <img> from turning into 2 rows after a zoom in

Question

My ducks. I want to keep them in a row. However, when I zoom in, they smash together and make two rows. What can I do to have them simply not show/stay in one row when zoomed in instead?

Code is here, these ducks live in a 2x1 table

<table>
<tr>
  <td>Check out deez ducks:</td>
  <td><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"></td>
</tr>
</table>

https://jsfiddle.net/myn2qarf/

Gif of problem: http://imgur.com/a/E5blp

---

EDIT: Found the answer, needed to add "nowrap" to the td containing the ducks. So, if before I had:

<td> *Ducks go here* </td>

I ended up needing

<td nowrap> *Ducks go here* </td>

Answer 1

Set the width of the image in percentage. 20% seems to work nice in this case.