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/

准备了一个小提琴

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

Expected result to see

有没有解决方案？

我得到了什么：

我的问题是，如果我可以使文本保持在一行（没有换行符），那么表总是溢出其父容器宽度（并使其可以滚动），然后才有想法省略中栏中的文字。

什么是解决方案（我经常发现）：

将第一列和第三列设置为“固定”（百分比或像素）是没有办法的，因为内容会不时地具有不同的长度。可以根据需要添加尽可能多的div或span（或者将所有内容放在一起 - 我首先尝试使用display和table，但我没有找不到合适的解决办法。

PS：如果你能够编辑一个有效的例子，那将是非常好的，如果你知道一个： - ）

编辑我可以自由使用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;
}

Answer 2

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

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

将第一个和最后一个孩子设置为固定宽度，中间部分将剩下的空间放在空间

Answer 3

请参阅this fiddle（或alternatively），您需要为每个表格单元格设置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;
}

Answer 4

您可以通过移动最后一列来重新排列列，然后使用嵌套表。

<强> 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

<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>

除省略号外，它运作良好。 See result

Answer 5

min-width结合宽度：100％似乎适用于firefox和chrome：

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

Answer 6

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

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

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

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

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;
}

CSS表，其中一列占用剩余空间

6 个答案:

HTML

CSS