HTML 表格：设置列宽以适应浮动内容答案

【问题标题】：HTML table: Set width of column to fit floating contentHTML 表格：设置列宽以适应浮动内容
【发布时间】：2011-09-11 12:08:45
【问题描述】：

我需要一些关于如何在 HTML 表格中设置列宽的建议。我有一个简单的表格，它跨越了包含 div 的整个宽度。（使用表格宽度=“100%”）

效果图如下：

我想要实现的是最后一列“重量”正好包含元素的大小。包含的元素是滑块和文本输入。滑块向左浮动。

首先我考虑为最后一列设置一个小于所需的大小（例如 width="1%"），以便该列自动调整为最小大小。但是问题是内容换行了：

那么我如何才能为最后一列指定一个固定大小，该大小正好是滑块+输入内容的大小，知道滑块具有以像素为单位的固定大小，但输入的大小以“em”给出，即它将取决于字体设置等。

编辑1
（参见 Atul Gupta 的评论。）
使用<td style="white-space:nowrap; width:1%">...</td>：

编辑2
如果这可能很重要，滑块控件实际上取自： Unobtrusive Slider Control V2
我从来没有弄清楚细节，但它会动态添加到文本<input>。
通过添加一个带有float:left 的额外类，我能够让它向左浮动；

更多信息：
滑块和文本输入实例化如下：

<input name="w-e2-09" id="w-e2-09" type="text" title="Range: 0 - 100" class="fd_slider fd_jump fd_slider_cn_extraclass" value="50"  maxlength="3" size="3" />

fd_slider_cn_extraclass 让滑块在内部使用这个：

div.extraclass
{
  width:120px;
  float:left;
}

如果我省略左浮动，文本框会像第二个屏幕截图一样中断到下一行（即使有可用空间）。这就是为什么我添加了左浮动。

编辑3
这是表格行的完整 HTML 详细信息（插入滑块 JS 之后），由 Firebug 给出：

<tr>
            <td><img src="images/buildings/city.png"></td>
            <td>Urban Infrastructure</td>
            <td class="numeric em">13 <i>(+2)</i></td>
            <td class="numeric">10</td>
            <td>
              <div class="fd-slider extraclass" id="fd-slider-w-e2-09" aria-disabled="false"><span class="fd-slider-inner"></span><span class="fd-slider-bar"></span><button type="button" class="fd-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" style="left: 50px;">&nbsp;</button></div><input type="text" size="3" maxlength="3" value="50" class="fd_slider fd_jump fd_slider_cn_extraclass" title="Range: 0 - 100" id="w-e2-09" name="w-e2-09">
            </td>
</tr>

滑块相关的 CSS 可通过此链接获得： http://www.frequency-decoder.com/demo/slider-v2/slider-v2.zip

编辑4
以下是演示问题并可用作实验室的最低 HTML 示例：
我用一个简单的固定大小的 div 替换了滑块。结果是一样的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Table</title>
</head>
<body>
  <div style="width:40em";>
    <table width="100%" border="1">
      <thead>
        <tr><th>Sector</th><th width="1%">Weight</th></tr>
      </thead>
      <tbody>
          <tr>
            <td>Urban Infrastructure</td>
            <td style="display:inline; white-space:nowrap;">
              <div style="width:120px; background-color:#BBB; float:left;">&nbsp;</div>
              <input type="text" value="50" size="3" />
            </td>
          </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

【问题讨论】：

为什么不将包含的元素的宽度相加，然后将最后一个''的宽度设置为固定值？
@StefanNch: slider size="120px" input size="3" (characters) 请问总和是多少？
no no no ... 也给输入一个大小，使用 css；下面的所有解决方案都是hack-ish，如果它们是可以避免的，而且我认为它们是可以避免的，你应该使用更清洁和可维护的解决方案......给出尺寸，总和，瞧！..如果你想要/需要用户，还有更多可访问性，使用“em”单位。

【解决方案2】：

尝试使用<td style="white-space:nowrap; width:1%">...</td>
如果存在问题，请将space, tab & enter 替换为&nbsp;
如果仍有问题，请尝试删除滑块上的float:left

在class="fd-slider-handle" role="slider" 之间添加display:inline-block 即class="fd-slider-handle" style="display:inline-block" role="slider"

或者你可以编辑css文件；在课堂上将display:block 更改为display:inline-block .fd-slider-handle

【讨论】：

见Edit1。 1. => 哎呀。 2. 没有空格。实际上，滑块包含在标签 3 中。与第二个屏幕截图相同。
在class="fd-slider-handle" role="slider"之间添加display:inline-block，即class="fd-slider-handle" style="display:inline-block" role="slider"
或者你可以编辑css文件；在课堂上将display:block 更改为display:inline-block .fd-slider-handle