Question

In the following example,

<table style="width: 100%;"><tr>
   <td>First Cell</td>
   <td>Second Cell</td>
</tr></table>

How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?

I’m using a GWT HorizontalPanel to do this, so if there’s either a html, css or gwt trick. Please let me know.

Thank you

Answer 1

You could achieve the layout you’re aiming for without tables, as explained in this question:

• xHTML/CSS: How to make inner div get 100% width minus another div width

HTML

<div class="two-columns">
   <div class="fit-to-contents">First Cell</div>
   <div class="fill-remaining-space">Second Cell</div>
</div>

CSS

.two-columns {
    overflow: hidden;/* Contains descendant floats */
}

.two-columns .fit-to-contents {
    float: left;
    background: #ffd;
}

.two-columns .fill-remaining-space {
    overflow: hidden;
    background: #fdf;
}

I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.