弗雷德会面。他是一张桌子:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

弗雷德的公寓有改变大小的奇怪习惯,所以他学会了隐藏一些他的内容,这样就不会把其他所有的单元都挤过去,把惠特福德夫人的客厅挤到被遗忘的地方:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

这种方法很有效,但弗雷德有一种挥之不去的感觉,如果他的右细胞(他昵称为Celldito)让出一点空间,他的左细胞就不会经常被截断。你能挽救他的理智吗?


总之:表的单元格如何才能均匀溢出,并且只有在它们都放弃了所有空白的情况下才能溢出?


当前回答

问题在于“table-layout:fixed”,它会创建间距均匀、宽度固定的列。但是禁用这个css属性将杀死文本溢出,因为表将变得尽可能大(并且没有任何东西可以溢出)。

我很抱歉,但在这种情况下,弗雷德不能鱼与熊掌兼得。除非房东一开始就给塞尔迪托更少的工作空间,否则弗雷德就不能使用他的…

其他回答

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

有一个更简单、更优雅的解决方案。

在你想要应用截断的表格单元格中,只需包含一个带有css table-layout: fixed的容器div。这个容器获取父表单元格的全部宽度,因此它甚至可以响应。

确保对表中的元素应用截断。

工作在IE8+

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

和css:

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

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

这是一个工作提琴 https://jsfiddle.net/d0xhz8tb/

<table style="table-layout: fixed; max-width: 100%;">
    <tr>
        <td>
             <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">This cells has more content</div>
        </td>
        <td>Less content here</td>
    </tr>
</table>

不知道这是否对任何人都有帮助,但我通过为每列指定特定的宽度大小来解决类似的问题。显然,如果每个列的内容宽度变化不太大,那么效果最好。

问题在于“table-layout:fixed”,它会创建间距均匀、宽度固定的列。但是禁用这个css属性将杀死文本溢出,因为表将变得尽可能大(并且没有任何东西可以溢出)。

我很抱歉,但在这种情况下,弗雷德不能鱼与熊掌兼得。除非房东一开始就给塞尔迪托更少的工作空间,否则弗雷德就不能使用他的…