html - 一列占用剩余空间的 CSS 表格

Question

我现在已经尝试了几件事(并环顾四周)，但到目前为止没有任何效果。所以我要问。

我想要的:

我有以下简单的 HTML:

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
    <td class="small">Small column</td>
  </tr>
</table>

表格本身应该是父容器的 100% 宽度。我希望第一列和最后一列 (.small) 尽可能大，这样内容就可以在没有换行符的情况下放入其中(几乎 white-space : nowrap 确实如此)。中间列 (.extend) 应占据剩余空间(因此表格将保持在其父容器的 100% 宽度内)并且 .extend 中的文本应在需要分到秒行之前被省略。

我在 http://jsfiddle.net/3bumk/ 准备了一个 fiddle

使用这些背景颜色，我希望得到如下结果:

有什么解决办法吗？

我得到的:

我的问题是，如果我可以让文本保持在一行中(没有换行符)，那么在想到省略中间栏中的文本。

什么是没有解决方案(我经常发现):

将第一列和第三列设置为“固定”(百分比或像素)不是解决方案，因为内容的长度有时会不同。可以根据需要添加尽可能多的 div 或 span (或者一起删除表格 - 我首先尝试的是 display和 table 但我也没有找到可行的解决方案)。

PS:如果你能将 fiddle 编辑成一个工作示例，那将是非常好的，如果你知道一个:-)

编辑我也可以自由使用 div 而不是表格!

Answer 1

这是一个使用 div 而不是表格的答案:DEMO

HTML

<div class="container">
    <div class="fnl first">First Baby</div>
    <div class="fnl last">Last Guy</div>
    <div class="adjust">I will adjust between both of you guys</div>
</div>

CSS

.container{
    width: 300px;
}
.first{
    float:left;
    background: red;
}
.last{
    float:right;
    background: orange;
}
.adjust{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}