【发布时间】：2012-09-25 21:35:40
【问题描述】：
我真的可以使用一些我无法解决的样式问题的帮助：
场景：
在一个 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 隔间中的那个，从而更改表格布局。您会看到行为发生了变化。
我的问题：
有没有办法将两者结合起来：
- 获得所描述和演示的所需行为
- 在没有固定布局的情况下填充表格（可能稍后切换布局）？
直到现在我都没有成功。但我只是所有这些时尚网络东西的血腥初学者......
【问题讨论】：
标签： html css html-table ellipsis