ansaurus

Question

How to get a row's width to fit to the width of the other rows in a table? (html)

Answer 1

+1 A:

First of all, do not close you input like you do, do the following:

<input type="text" />

Second: Just give the table a fixed width:

<table border="1" style="width: 400px;">
  <tr><td>name: <input type="text" /></td></tr>
  <tr><td>blah blah blah blah blah blah blah blah blah blah</td></tr>
</table>

Ah and finally third: Do not use tables for layouts. Even forms can be done without a table.

Kau-Boy 2010-09-01 11:30:25

First, the input is just an example. It represents some dynamically generated content.Second, as I said I can't give a fixed width (because of the first).Finally, I don't use tables for layout. My framework (GWT) does.

Hagai Cibulski 2010-09-01 11:58:46

The suggestion was to use a fixed width on the table, not on the table cell. This will cause the text to wrap rather than expand it's container.

roryf 2010-09-01 12:33:59

I would like the table width to fit the width needed by the components in the first table cell.

Hagai Cibulski 2010-09-01 12:46:07

I don't think that you want your table to grow infinite. So setting a fixed size is a good idea. You could also set a min-width (and max-width), but than the second row might increase the width to the max-width. Using only a max-width the second row might increase the width, but at a specific width, the content of the second row will be wrapped.

Kau-Boy 2010-09-01 12:47:36

The table won't grow infinite, only according to the components in the first row (which vary in each specific instance of this generic table). However max-width is not good, since it will be different for different components in the first row.

Hagai Cibulski 2010-09-01 13:26:37

But there must be in any case a max-width. To make it short. You cannot tell a table to ignore the necessary space of a second row without making either this row or the table itself to a max width. Not without using any kind of JavaScript which I higly recommend not to use.

Kau-Boy 2010-09-01 15:35:19

Answer 2

A:

Not sure why you say you cannot use a fixed width because you have a dependancy on the first cell. You can calculate this at run time by checking the value for the 2nd cell, and if it is longer than a certain defined width you would apply a defined width to your cell.

If the output for the 2nd cell however is not very long (and does not trigger your length check) then you do not need add any width definition.

It seems simple to me, but my assumption here is that you are using a scripting language on the side to generate this content, unless you mean this is PURE html, in which case I would tackle the problem with a JS library like jQuery and do the same length check on the value and if triggered add a width definition for your cell.

Jakub 2010-09-01 12:29:48

The html is generated by GWT. The real html is much more complex. It is a generic dialog box that can have arbitrary components, hence each dialog will have a different width. On the bottom of my generic dialog box there is a status line that may present different texts. If the status text is long, it should wrap to the next line, making the dialog a bit higher, but not wider.

Hagai Cibulski 2010-09-01 12:45:19

Would wrapping your output in a div with something like `max-width: 200px;` work? Could technically use a div to keep the content from spreading the cell too wide past your predefined width.

Jakub 2010-09-01 13:04:07

No, since the width is *not* predefined.

Hagai Cibulski 2010-09-01 13:27:52

ansaurus

tags:

views:

answers:

How to get a row's width to fit to the width of the other rows in a table? (html)

related questions