html – CSS表,一列占用空间

我已经尝试了几件事(并在这里环顾四周),迄今没有任何工作.所以我要问.

我想要的是：

我有以下简单的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)与它们一样大,所以内容可以适应它,而不需要换行(几乎是什么空格：nowrap).中间列(.extend)应该占用空间的其余部分(因此表将保持在其父容器的100％宽度内),并且.extend中的文本应在其需要中断到秒线之前被省略.

我在http://jsfiddle.net/3bumk/准备了一个小提琴

有了这些背景颜色,我会期待像：

有没有解决方案？

我得到的

我的问题是,如果我可以使文本保留在一行(没有换行符),表将始终溢出其父容器宽度(并使其可滚动),然后才有意思省略文本中的文本中间栏.

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

将第一列和第三列设置为(百分比或像素)的“固定”,因为内容的长度会不同.可以根据需要添加任意数量的div或span(或者摆脱所有表格,我先用display和table,但是我没有找到一个可行的解决方案).

PS：如果你可以编辑小提琴到一个工作示例,如果你知道一个:-)这将是非常好的

编辑我可以自由使用div而不是表！

解决方法

这是一个使用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;
}

html – CSS表,一列占用空间

解决方法

猜你在找的HTML相关文章