Html 一列占用剩余空间的 CSS 表

CSS Table with one column taking remaining space

提问by Tim Roes

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:

我有以下简单的 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: nowrapdoes). 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 .extendshould be ellipsised before it needs to break to a seconds line.

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

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

我在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 divor spanas needed (or get rid of the table all together - what I tried first, with displayand tablebut I didn't find a working solution that way either).

将第一列和第三列设置为“固定”（百分比或像素）不是解决方案，因为内容会不时具有不同的长度。它可以添加尽可能多div或span根据需要（或摆脱表的所有一起-我的第一次尝试，有display和table，但我没有找到任何工作解决方案的方式）。

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

PS：如果您可以将小提琴编辑为一个工作示例，那就太好了，如果您知道一个:-)

EDITI am free to use divs instead of a table too!

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

采纳答案by Rohit Agrawal

Here is an answer using divs instead of a table: DEMO

这是使用 div 而不是表格的答案：DEMO

HTML

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

CSS

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

回答by Marius Djerv

Something like this? http://jsfiddle.net/NhGsf/

像这样的东西？http://jsfiddle.net/NhGsf/

By using: display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;

通过使用： display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;

And setting first and last child to fixed width the middle section will have the rest off the space

并将第一个和最后一个孩子设置为固定宽度，中间部分将使其余部分脱离空间

回答by Philip B.

I was facing the same challenge and I found the following solution using tables.

我面临着同样的挑战，我使用表格找到了以下解决方案。

The HTML needs to use a DIV in the long column. The CSS defines your small and extend classes. The hard part being the definition of the extend class.

HTML 需要在长列中使用 DIV。CSS 定义了您的小类和扩展类。困难的部分是扩展类的定义。

This gives you the behavior you describe.

这为您提供了您描述的行为。

HTML

HTML

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

CSS

CSS

table {
  margin-top: 50px;
}

table td {
  white-space: nowrap;
}

table td:nth-child(1) {
  background-color: red;
}

table td:nth-child(2) {
  background-color: green;
}

table td:nth-child(3) {
  background-color: orange;
}

.extend {
  display: table;
  table-layout: fixed;
  width: 100%
}

.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

回答by Muniba

You can re-arrange the columns by moving the longest one at the end then use nested tables.

您可以通过在末尾移动最长的列来重新排列列，然后使用嵌套表。

CSS

CSS

.extend
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}
td
{
    white-space:nowrap;
}
.box
{
    width:1000px;
    border:blue solid thick;
    overflow:hidden;
}

HTML

HTML

<div class="box">
<table width="100%" border="1">
  <tr>
    <td class="small">First column with text</td>
     <td class="small">Small column</td>
     <td>
<table>
     <tr>
    <td  class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
    </tr>
    </table>
   </td>
  </tr>
</table>
</div>

Except for the ellipsis it is working well.See result

除了省略号，它运行良好。查看结果

回答by ling

min-width in combination with width:100% seems to work in firefox and chrome:

min-width 与 width:100% 结合使用似乎适用于 Firefox 和 chrome：

  tr {
    td:first-of-type {
      width: 100%;
    }
    td:last-of-type {
      min-width: 200px;
    }
  }

回答by SW4

See this fiddle(or, alternatively), you need to set the max-widthfor each table cell:

看到这个小提琴（或者，或者），您需要max-width为每个表格单元格设置：

body{
    width:100%;
    padding:0;
    margin:0;
}
table {
    margin-top: 50px;
    width:100%;
    max-width:100%;
}
table td {
    white-space: nowrap;
}
table td:nth-child(1) {
    background-color:red;
    max-width:100px;
}
table td:nth-child(2) {
    background-color: green;
    overflow:hidden;
    max-width:100px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table td:nth-child(3) {
    background-color: orange;
    max-width:100px;
}