没有表的表的液体调整尺寸行为.布局:固定？

Question

我真的需要一些帮助来解决一些我没能解决的时尚问题：

场景：

在web应用程序中，我有一个表可视化了一个条目列表。其中两列可以占用较长的内容，使用“溢出:隐藏”和应用“文本溢出:省略”来显示。所有表格单元格的内容都封装在跨度中，这样我就可以在填充表的同时应用动画。都很好。

现在，我想把表格的布局从以前的固定样式改为更具流动性的行为。

在对表列进行固定宽度设置之前。对于除两列之外的所有列，我都保持固定的宽度，即使对于一个省略号样式的切碎列也是如此。另一种是100%的宽度，这样表就消耗了整个可用的容器，从而提供了一种液体样式(“始终使用全屏幕”)。该列显示其内容和一些空白，用于按需要填充。

理想行为：

我预计当窗口变小时，表会缩小。这显然应该通过将列的宽度设置为100%来实现，因为它是唯一没有固定长度的列。该部分只有在单元格内容适合的情况下才能工作。一旦窗口变得如此狭窄，浏览器就会应用该内容不再适合滚动条。这不是我想要的。相反，我想用省略号样式的规则来分割单元格内容，这样表实际上就会变小，甚至可以达到最小宽度。

测试用例：

HTML：

<div>
<table>
<tr>
  <td class="c1"><span class="ellipsis">Alfreds Futterkiste</span></td>
  <td class="c2"><span class="ellipsis">Maria Anders</span></td>
  <td class="c3"><span class="ellipsis">Germany</span></td>
</tr>
<tr>
  <td class="c1"><span class="ellipsis">Laughing Bacchus Winecellars</span></td>
  <td class="c2"><span class="ellipsis">Yoshi Tannamuri</span></td>
  <td class="c3"><span class="ellipsis">Canada</span></td>
</tr>
<tr class="alt">
  <td class="c1"><span class="ellipsis">Königlich Essen</span></td>
  <td class="c2"><span class="ellipsis">Philip Cramer</span></td>
  <td class="c3"><span class="ellipsis">Germany</span></td>
</tr>
</table>
</div>​

CSS：

table{table-layout:fixed;width:100%;border:solid gray 1px;}
/*table{table-layout:auto;width:100%;border:solid gray 1px;}*/
tr{}
td{}
td.c1{width:100%;}
td.c2{width:6em;}
td.c3{width:4em;}

/* formatting the clipped output */
.ellipsis{display:block;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;width:inherit;}

/* just for the test case */
div{display:block;width:90%;margin:1em;background-color:silver;}
span{padding:2px;width:inherit;}

我为您准备了一个用来玩测试用例的小提琴：http://jsfiddle.net/UgYFs/3/。

当您缩小窗口宽度(或左边底部“结果”间隔的宽度)时，您可以看到事情是如何工作的。这就是我想要的行为。

问题：(因此这个问题.)

这只适用于“表格布局:固定；”。但是，有一些原因使此选项不可用:在实际应用程序中，表行是动态插入的。这并不适用于固定的布局，至少光学结果是完全不同的(这也是合理的)。因此，不管我喜不喜欢，我认为我必须使用“table-样式:table”(默认值)。您可以通过取消对第二行的注释，从而更改表布局，切换到CSS间隔中。你看到行为改变了。

我的问题：

有没有办法把这两者结合起来：

• 获得所需的行为，如描述和演示的那样
• 要在没有固定布局的情况下填充表(可能稍后切换布局)？

直到现在我都没能成功。但我对这些时髦的网络东西只是个新手.

Answer 1

好吧，因为没人有主意，所以我尝试了一种不同的方法来解决我要问的问题。我想结束这个问题，所以我张贴结果，即使这不是我在这里要求的解决方案.

我成功地修改了应用程序的其余部分，这样即使在设置table-layout: fixed;时，表的归档方式也是动态的。这允许我使用标准的css表规则来保持单个列的宽度灵活，但长度仍然有限，因为整个表的宽度现在可以从容器中派生出来。