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

【问题标题】：How to set table column width for dynamic drop down list?如何为动态下拉列表设置表格列宽？
【发布时间】：2010-11-04 08:21:10
【问题描述】：

我有一个带有动态下拉列表的表格。

下拉菜单的宽度将根据其内容而变化。

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

如果我设置的宽度小于下拉列表的大小，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%"，则动态列将包含空格

我在动态列上尝试过 width: auto 并将其设置为固定宽度，但这些都不适合我

【问题讨论】：

是的。大概。如果您可以向我们展示您的 html 和当前的 css，我们可能会更具体，并且希望对您更有用。
列标题是否比下拉框宽？
没有列标题仅在我将宽度设置为较小值时才换行

标签： css width html-table

【解决方案1】：

对于这个特定的表，为什么不覆盖表参数内的 css 数据？

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

【讨论】：

您能详细说明一下您的意思吗？我所能做的就是将不同列的宽度设置为 60%，并让这个下拉列没有宽度设置。这实现了我的目标，但看起来很难看，因为这种方法也会挤压我的固定宽度列
是的，您可以这样设置表格中的宽度参数：width="${myTable.width}" 其中 myTable.width 是在其他位置设置的参数（计算得出）跨度>

【解决方案2】：

您需要的是一个宽度为 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 style="min-width: 200px;" >

【讨论】：

我事先尝试了您的建议，如果我为列使用较小的宽度，则标题会被换行，并且如果下拉列表大于列，则其两侧都会有一大块空白跨度>
尝试将标题放在标签中。这应该可以防止它被包裹。
当我尝试这个例子时，在动态列上设置 width="10" 有效。我使用 Internet Explorer 7、Firefox 3.5.1 和 Opera 9.64 进行了测试。你测试的是什么浏览器和版本？此外，HTML 顶部指定了什么 DOCTYPE（如果有）？
DOCTYPE 如下

【解决方案3】：

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

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

【讨论】：