Question

我有一张包含动态下拉列表的表格。

下拉列表的宽度将根据其内容而改变。

我希望表格列与下拉列表的宽度相同。

如果我设置的宽度小于下拉列表的大小IE似乎使列大于下拉列，同时包装列标题，它会在下拉列表的任一侧插入空格。

CSS中是否有一种方法可以说使列与其内容的大小相同？

这是一个示例html表，其中包含我当前的修复程序（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>

问题在没有任何CSS的情况下存在

如果我从展开列中删除width =“80％”，则动态列将具有空格

我在动态列上尝试过宽度：自动并将其设置为固定宽度，但这些都不适用于我

Answer 1

您需要的是宽度为100％且没有定义宽度的1列的表格。带下拉列的列可以具有非常小的宽度，浏览器将自动使整列与下拉列表的宽度匹配。

HTML看起来像这样：

<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>

作为对以下评论的回答，您可以探索一些解决方案：

你可以在你的下拉列表中添加一个至少有一定宽度的选项标签和一些不间断的空格，如下所示：

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

你可以给select标签一个最小宽度，如下所示：

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

Answer 2

为什么不为此特定表覆盖表参数中的css数据？

传入该参数（或在其他地方解析）。

Answer 3

这就是表的工作方式，如果有2列没有设置宽度并且设置了表宽度，则剩余的可用空间将分布在2列之间。

如果ExpandingColumn中的内容足以填充剩余宽度，则从表中删除100％宽度可以解决您的问题。

如何为动态下拉列表设置表格列宽？

3 个答案: