Question

I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.

Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?

<table>
  <tr>
    <td style="width:200px; border:solid 1px black;">
      <!-- can only make changes inside here -->
      <div style="border:solid 1px red; text-align:right;">ABC</div>
      <input style="width:300px;" value="DEF">
    </td>
  </tr>
</table>

The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I’ve tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.

Anyone know how to do this? Thank you.

Answer 1

If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/

If you can’t wrap the input part, you can use the expression that run just one time (so it wouldn’t cause any performance problems): http://jsfiddle.net/AkVqS/2/