How do I tell the dropdown (<SELECT>) and/or column (<TD>) to automatically size itself to the greater of widest item in the dropdown, and then get the smaller dropdowns to fill the width of the column?
If I specify in the SELECT tag, STYLE="{width: 100%;}" the dropdown boxes will expand to the column, but does not cause the column itself to expand to the width necessary to display the items in the dropdowns. When I specify STYLE="{width: auto}" in the SELECT tag, the dropdowns will expand to widest item in the dropdown, and causes the column to expand to hold the dropdown. But, the smaller dropdowns do not expand to fill the column width.
I tried specifying "margin-left: 0px; margin-right: 0px;" and "margin-left: 0px; margin-right: 0px; display: table-cell;" in the SELECT's style but they didn't make any difference.
Does anyone have any suggestions?
Below is a plain HTML example with shows the issue. (BTW, I've been testing the code in IE 6.)
Thanks,
Richard
Expand|Select|Wrap|Line Numbers
- <html>
- <header>
- </header>
- <body>
- <table width="auto" border="1" cellspacing="0" cellpadding="0" >
- <tr height="auto">
- <td width="2"> <!-- just add a little spacing to the left edge -->
- </td>
- <td width="99%" align="left" valign="top" class="OrderImageName" nowrap>
- <table>
- <tr>
- <td nowrap align="center">
- some data goes here
- </td>
- </tr>
- </table>
- </td>
- <td valign="top">
- <table width="auto" border="1" cellspacing="0" cellpadding="0">
- <tr>
- <td>
-
- </td>
- <td align="center" >
- Types
- </td>
- <td width="2"> <!-- just add a little spacing to the right edge -->
-
- </td>
- </tr>
- <tr>
- <td align="left" nowrap >
- Item #1
- </td>
- <td nowrap>
- <select style="{width: auto}" >
- <option><none></option>
- <option>aaaaa aaaaaa</option>
- </select>
- </td>
- </tr>
- <tr>
- <td align="left" nowrap >
- Item #2
- </td>
- <td nowrap>
- <select style="{width: auto}" >
- <option><none></option>
- <option>aaaaaaa aaaa aaaaaa</option>
- <option>aaaaaaa aaaa aaaaaa</option>
- <option>aaaa</option>
- </select>
- </td>
- </tr>
- <tr>
- <td align="left" nowrap >
- Item #3
- </td>
- <td nowrap>
- <select style="{width: auto}" >
- <option><none></option>
- <option>aaaa aaaaaa aa aaaaaa</option>
- <option>aaaa aaaaaa aa aaaaaaa</option>
- <option>aaaa aaaaaa aa aaaaaa</option>
- <option>aaaa aaaaaa aaaa</option>
- <option>aaaaaaaa aa aaaaaa</option>
- <option>aaaaaaaa aa aaaaaaa</option>
- <option>aaaaaaaa aa aaaaaa</option>
- <option>aaaaaaaa aaaa</option>
- <option>aaaaaaaa aa aaaaaa, aaaa</option>
- <option>aaaaaaaa aa aaaaaaa, aaaa</option>
- <option>aaaaaaaa aa aaaaaa, aaaa</option>
- <option>aaaaaaa aaaaaaaa aa aaaaaa</option>
- <option>aaaaaaa aaaaaaaa aa aaaaaaa</option>
- <option>aaaaaaa aaaaaaaa aa aaaaaa</option>
- <option>aaaaaaa aaaaaaaa aaaa</option>
- <option>aaaaaaa aaaaaaaa aa aaaaaa, aaaa</option>
- <option>aaaaaaa aaaaaaaa aa aaaaaaa, aaaa</option>
- <option>aaaaaaa aaaaaaaa aa aaaaaa, aaaa</option>
- <option>aaaaaaa</option>
- </select>
- </td>
- </tr>
- </table>
- </td>
- <td>
- <table height="auto" >
- <tr height="50%" valign="top" >
- <td valign="top" align="right" >
- XXXXXX
- </td>
- </tr>
- <tr height="50%" >
- <td valign="bottom" align="right" >
- YYYYYY
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </body>
- </html>