没有表格布局的表格的液体调整大小行为：已修复？

Question

我真的可以使用一些样式问题的帮助我无法解决：

场景：

在Web应用程序中，我有一个可视化条目列表的表。其中两列可以使用更长的内容，使用“overflow：hidden;”并应用“text-overflow：ellipsis”来切换显示内容。所有表格单元格的内容都被包装成跨距，以便我可以在填充表格时应用动画。一切都很好。

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

在我为表列固定宽度设置之前。对于除了两列以外的所有列，我保持固定宽度，即使是一个省略号样式的切割列。另一个获得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-layout：fixed;”。有一定道理，但是有理由使这个选项不可用：在实际应用中，表行是动态插入的。这不适用于固定布局，至少光学结果是完全不同的（这也是有意义的）。所以如果我喜不喜欢，我想我必须使用“table-style：table”（默认值）。您可以通过取消注释第二行来切换到CSS隔离专区中的内容，从而更改表格布局。你看到行为发生了变化。

我的问题：

有没有办法将两者结合起来：

• 获得所描述和演示的所需行为
• 在没有固定布局的情况下填充表格（可能稍后切换布局）？

直到现在我都未能成功。但我只是这个时尚网络内容的血腥初学者......

Answer 1

是的，因为没有人有想法我尝试了一种不同的方法来解决我所问的问题。我想关闭这个问题，所以我发布结果，即使它不是我在这里问的解决方案......

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