4

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

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

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

如果我设置的宽度小于下拉列表的大小，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 在动态列上并将其设置为固定宽度，但这些都不适合我

4

3 回答 3

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 style="min-width: 200px;" >
于 2009-06-19T18:02:19.523 回答
0

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

该参数在哪里传递（或在其他地方解析）。

于 2009-06-19T15:22:22.280 回答
0

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

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

于 2009-06-19T22:45:23.063 回答