0

I am sorry if this turns out to be a repeated question. I have a Javascript function which creates an HTML table showing information that depends on certain parameters. The table is actually quite large, but the problem I'm having with it is easier to understand (and remains completely unaltered) if I cut the table down to the relevant bit:

<table>
  <tr>
    <td style="text-align:right">Some text</td>
    <td><img src="......."></td>
  </tr><tr>
    <td colspan="2">Another table (nested)</td>
  </tr>
</table>

The problem arises when the sum of the widths of whatever goes in the first row of the table is smaller than the width of the nested table in the second row. In this case it seems that the "excess width" gets equally (or proportionally?) distributed between the two cells of the first row. For purely aesthetic reasons (vertical alignment between image and nested table), however, I want the entire "excess width" to get added to the left-hand cell of the first row. I can't give any particular width to the right-hand cell and use "table-layout:fixed" (which BTW doesn't seem to work correctly in my browser, but that's a separate issue), because the image may have different widths. The cells of the first row don't have any padding, so the image cell should theoretically remain "tight" around the image (which it doesn't), and the right-aligned text of the first cell should touch the image.

I have done quite a lot of experimentation, but with my browser (Chrome) at least I just don't manage to prevent the right-hand cell from getting wider than the image....

EDIT: Thanks for the jsfiddle example. But with this method the table will occupy all the available width, while I'd prefer its width to adjust to the content....

0

1 Answer 1

1

Set the widths this way:

<table>
  <tr>
     <td style="text-align:right;width:100%;">Some text</td>
     <td><img src="......."></td>
  </tr><tr>
    <td colspan="2">Another table (nested)</td>
  </tr>
</table>

Leaving the second <td>'s width without value will make the first cell to expand to maximum possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.