How do I specify that a html cell should have the minimum width it needs to display all of its content

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

score 2 · Answer 1 · answered Feb 10 '12 at 08:11

Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:

<table width=681 border><tr>
   <td nowrap>First Cell</td>
   <td width="100%">Second Cell</td>
</tr></table>

There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.

This looks more like a hack to me rather than a proper solution. — Artyom, Feb 10 '12 at 10:56

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 10 '12 at 08:34

Paul D. Waite

96,640
56
199
270

Great pointer. There was one extra thing I needed to do though. I had to set table-layout to fixed on the outer table. Thanks! – RAY Feb 17 '12 at 08:53
@RAY: you’re most welcome. You’ve got another layout table in there? `table-layout:fixed` does help if you want precise control over the widths of all columns, but note that [it’s not supported in IE 6 and 7](http://www.browsersupport.net/CSS/table-layout). – Paul D. Waite Feb 17 '12 at 09:15

score 0 · Answer 3 · answered Feb 10 '12 at 08:00

0

Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.

What is it you're really trying to do?

What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)

answered Feb 10 '12 at 08:00

Ernest_CT

62
4

I think the OP has described what he’s really trying to do: “ 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”. HTML tables don’t do that automatically. – Paul D. Waite Feb 10 '12 at 08:22

Mr Lister · Answer 4 · 2012-02-10T08:24:17.370

0

Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.

Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.

Jsfiddle

edited Feb 10 '12 at 08:24

answered Feb 10 '12 at 08:07

Mr Lister

45,515
15
108
150

1

On Chrome, setting width:0 on a cell has no effect, unless you set some other properties or attributes. – Jukka K. Korpela Feb 10 '12 at 08:14
Oh... I see. Sorry, I was being short-sighted. Too Gecko-centric. What properties need to be set in order to make it work on Chrome? `white-space` doesn't help. And it doesn't work on IE7 either, but I'm not sure if that bothers me. IE8 is OK. – Mr Lister Feb 10 '12 at 08:21
I just found that `width:1px` will do the trick on Chrome. Thanks for the heads up! – Mr Lister Feb 10 '12 at 08:25

score 0 · Answer 5 · answered Feb 10 '12 at 08:13

0

Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.

answered Feb 10 '12 at 08:13

Artyom

1,599
12
22

Doesn't seem to work for me. I put a button in the first cell, but the cell ends up being rendered much wider than the button. – RAY Feb 13 '12 at 02:17
@RAY I don't see why it doesn't work for you. I put up a jsfiddle example: http://jsfiddle.net/QUApx/, and it seems to be working in all browsers including IE6 and IE7. Are you sure no other styles are specifying your widths, and that you don't have `width` attributes on your `` or `
` tags?
– Artyom Feb 13 '12 at 09:43
Thanks Artyom. If you change the table width to 100%, then you'll see what I mean. – RAY Feb 13 '12 at 09:59
@RAY Oh, I see the problem now. I didn't know you wanted your table to be 100% wide - my solution is for the case where all columns in the table need to be as wide as their contents, not only the first column, as in your case. In this case I'd set the width of your first column to 1 pixel, as another answer in here suggests. – Artyom Feb 13 '12 at 10:45

How do I specify that a html cell should have the minimum width it needs to display all of its content

5 Answers5

HTML

CSS