CSS: How to set table column width for dynamic drop down list

Question

Hey,

I have a table with a dynamic drop down list.

The width of the drop down will change depending on its content.

I would like the table column to be the same as the width of the drop down.

If I set a width less than the size of the dropdown IE seems make the column bigger than the drop down whilst wrapping the column title it inserts whitespace on either side of the dropdown.

Is there a way in css to say just make the column the same size as its content?

Thanks in advance

EDIT

Here is a sample html table that includes my current fix (kludge)

<table id="mappingtable" width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <th width="80px">FixedWidthColumn</th>
    <th width="80%">ExpandingColumn</th>
    <th width="122px">&nbsp;</th>
    <th>DynamicColumn</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Text</td>
    <td align="center">Button</td>
    <td align="center">DropDownList</td>
  </tr>
</table>

The problem exists without any css

If I remove the width="80%" from the expanding column the dynamic column will have whitespace

I have tried width: auto on the dynamic column and setting it to a fixed width but none of these work for me

Answer 1

Why don't you, for this specific table, override the css data inside of the table parameters?

Where that parameter is passed in (or parsed somewhere else).

Answer 2

What you need is a table with a width 100% and 1 column without a width defined. The column with the dropdown can have a realy small width and the browser will automatically make the whole column match the width of the dropdown.

The HTML would look like this:

<table width="100%" >
  <tr>
    <th width="80">FixedWidthColumn</th>
    <th>ExpandingColumn</th>
    <th width="122"> </th>
    <th width="10">DynamicColumn</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Text</td>
    <td align="center">Button</td>
    <td align="center">DropDownList</td>
  </tr>
</table>

As an answer to the remarks below, there are some solutions you can explore:

You could possibly add a an option tag to your dropdown list that is at least a certain width and some no-breaking spaces like so:

<option>Please select...&nbsp;&nbsp;&nbsp;&nbsp;</option>

You could give the select tag a minimum width like so:

<select style="min-width: 200px;" >

Answer 3

That's how tables work, if there are 2 columns without a width set and the table width is set, the remaining available space will be distributed between the 2 columns.

Removing the 100% width from the table would solve your problem if the content in ExpandingColumn is big enough to fill the remaining width.