TD elements word wrapping on shrinking browser window

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

Basically your problem is right there in the question "How can I get the td widths to stay fixed ... Also, I can't fix the width of the td since ..." :)

Anyways, there are two possible solutions that I can think of.

1. If you know what maximum width of the table you want to allow, you could wrap it in a div with a fixed width. That way the body of your page won't shrink to less of the width of the wrapping div, and therefore it will not push on your table.

2. Use javascript to fix the width of the td after the page has loaded. That way it will be fixed to whatever width its contents have expanded it to. You should be able to get the width from the td from the offsetWidth property.

Answer 2

You can add the 'nowrap' attribute to the td:

<td nowrap>

or style it with:

td {white-space:nowrap;}