html - CSS 单元格没有跨越整个表格宽度的空格

Question

我有一个水平对齐的 2 单元格表格。表格有一个设定的宽度，大约 500px。每次加载页面时，第一个和第二个单元格都填充有不同长度的字符串变量。我想要得到的是单元格 1 中没有空格左对齐，单元格 2 和表格边缘之间没有空格。看起来像:

[[textfromvariable1][textfromvariable2                                    ]]

编辑:eli:

现在看起来像这样:

[[text1][text2      ]

所以单元格二没有覆盖表格的宽度。

Answer 1

我通过利用以下事实实现了这一点:尽管在单元格中设置了宽度，但它会扩展以适合其内容。

编辑:HTML 尝试为表格提供您为表格单元格指定的宽度。但是表格单元格将扩展该宽度以适合其内容。因此，从 1px 开始，您是在告诉表格只将少量空间分配给该表格单元格。当它扩展时，它会尝试从其他单元格中获取最小量以适应该单元格的宽度。这留下了一个紧密包裹的 minwidth 单元格，剩下的宽度被其余单元格占用(在您的示例中，只有一个其他单元格)。

CSS:

.minwidth { width: 1px; }
.nowrap { white-space: nowrap; }

HTML:

<table>
<tr>
<td class="minwidth nowrap">This is my first string</td>
<td>This is the rest</td>
</tr>
</table>

我假设您的“variable1 文本”不应包含在第一个单元格中。否则，考虑到您可以随机包装“variable1”(但在字边界上)并实现更小的宽度，说您希望填充“variable2”有点武断。

编辑:这是一个演示 http://jsfiddle.net/mZCg8/