Question

I have a table who’s columns contain two inline divs, one displaying an image, and the other display text, side by side. So each td is rectangular with an image on the right and text beside it on the left (on a single line). The problem (which happens in all browsers) is when I shrink the horizontal browser size, rather than keeping the td width fixed and adding a horizontal scroll bar, it is wrapping the text and moving it under the image, hence shrinking the width of the td. How can I get the td widths to stay fixed regardless of the browser width? Oh and in case its affecting it, both divs have relative positioning so that I can slightly adjust their position within the td. Also, I can’t fix the width of the td since each column width must slightly vary depending on the text. Thanks

<td>
  <div style="display:inline;position:relative;">
    <img src="some_image.jpg" />
  </div>
  <div style="display:inline;position:relative;">
    some short text
  </div>
</td>

Answer 1

You can add the ‘nowrap’ attribute to the td:

<td nowrap>

or style it with:

td {white-space:nowrap;}