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

<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)让出一点空间,他的左细胞就不会经常被截断。你能挽救他的理智吗?


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


当前回答

Yep I would say thirtydot has it, there is no way to do it unless you use a js method. You are talking about a complex set of rendering conditions that you will have to define. e.g. what happens when both cells are getting too big for their apartments you will have to decide who has priority or simply just give them a percentage of the area and if they are overfull they will both take up that area and only if one has whitespace will you stretch your legs in the other cell, either way there is no way to do it with css. Although there are some pretty funky things people do with css that I have not thought of. I really doubt you can do this though.

其他回答

假定“表布局:固定”是基本的布局要求,这将创建均匀间隔的不可调整列,但您需要使单元格的百分比宽度不同,也许设置单元格的“colspan”为倍数?

例如,为了方便百分比计算,使用总宽度为100,并且假设您需要一个单元格为80%,另一个单元格为20%,考虑:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

当然,对于80%和20%的列,您可以将100%宽度的单元格colspan设置为5,80%宽度的单元格colspan设置为4,20%宽度的单元格colspan设置为1。

你可以试着“加权”某些列,像这样:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

您还可以尝试一些更有趣的调整,如使用0%宽度的列和使用一些组合的白色空间CSS属性。

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

你懂的。

Yep I would say thirtydot has it, there is no way to do it unless you use a js method. You are talking about a complex set of rendering conditions that you will have to define. e.g. what happens when both cells are getting too big for their apartments you will have to decide who has priority or simply just give them a percentage of the area and if they are overfull they will both take up that area and only if one has whitespace will you stretch your legs in the other cell, either way there is no way to do it with css. Although there are some pretty funky things people do with css that I have not thought of. I really doubt you can do this though.

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

几天前我也遇到了同样的挑战。看来路西法·萨姆找到了最好的解决办法。

但我注意到你应该在spacer元素复制内容。认为它不是那么糟糕,但我也想应用标题弹出剪切文本。这意味着长文本将在我的代码中出现第三次。

在这里,我建议在伪元素之后访问title属性以生成间隔并保持HTML干净。

适用于IE8+, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>
.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/