Question

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

这是渲染：

enter image description here

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

首先，我考虑为最后一列设置小于所需的大小（例如，width =“1％”），以便该列自动调整为最小大小。但问题是内容包装：

enter image description here

那么如何指定最后一列的固定大小，它与滑块+输入内容的大小完全相同，知道滑块具有固定大小（以像素为单位），但输入的大小以“em”为单位，即它将取决于字体设置等。

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

enter image description here

EDIT2
如果这可能很重要，滑块控件实际上取自： 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;
}

如果我省略向左浮动，则文本框会像第二个屏幕截图中那样突破到下一行（即使有可用空间）。这就是我添加浮动的原因。

EDIT3
这是表格行的完整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

Edit4
这是一个最低限度的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>

Answer 1

如果没有为我提供修改的工作示例（可能是jsfiddle或类似的东西），我不是百分之百确定。但是，您可以尝试删除float: left;并在滑块和文本框上设置display: inline-block;。如果这不起作用，请在单元格上尝试white-space: nowrap;。

Answer 2

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

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

或者你可以编辑css文件;在班级display:block

display:inline-block

.fd-slider-handle

Answer 3

我不会给你指出“完全符合滑块+输入内容的大小”，但也许这会对你有帮助（??）：
- ＆GT;如果您将第二个解决方案保留在指定width =“1％”的位置并在相应的td中添加关键字nowrap？

Answer 4

尝试在扇区列上放置'width = 100％'，并在所有其他列上添加'nowrap'。这（我希望）将迫使扇区列占用尽可能多的空间，将其他列压缩到最小尺寸。如果这样做，您可能需要为每个列添加一点填充以获得漂亮的外观。

HTML表：设置列的宽度以适合浮动内容

4 个答案: