CSS表，其中一列占用剩余空间 [英] CSS Table with one column taking remaining space

问题描述

我已经尝试了几个东西（并在这里环顾四周），没有什么工作到目前为止。

我有这样的想法：

以下简单的HTML：

 < table& 
< tr> 
< td class =small>第一栏有文字< / td> 
< td class =extend>此列应填充剩余空间，但如果文本太长则应被截断< / td> 
< td class =small>小栏< / td> 
< / tr> 
< / table> 
  

表本身应该是父容器的100％宽度。
我希望第一列和最后一列（ .small ）尽可能大，因此内容可以适应它而没有换行符所以几乎什么 white-space：nowrap ）。中间列（ .extend ）应占用剩余空间（因此表将保留在其父容器的100％宽度内）和<$ c $

我已经准备了一个小提琴在

HTML

 < div class =container> 
< div class =fnl first>第一个宝宝< / div> 
< div class =fnl last>最后Guy< / div> 
< div class =adjust>我会在两个人之间进行调整< / 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; 
} 
  

I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.

What I want:

I have the following simple 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>

The table itself should be 100% width of the parent container. I wish the first and last column (.small) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what white-space: nowrap does). The middle column (.extend) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within .extend should be ellipsised before it needs to break to a seconds line.

I've prepared a fiddle for this at http://jsfiddle.net/3bumk/

With these background colors I would expect a result like:

Is there any solution for this?

What I get:

My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.

What is no solution (I often found):

It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many div or span as needed (or get rid of the table all together - what I tried first, with display and table but I didn't find a working solution that way either).

PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)

EDIT I am free to use divs instead of a table too!

解决方案

Here is an answer using divs instead of a table: 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;
}

这篇关于CSS表，其中一列占用剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！