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表规则来保持单列的宽度灵活但长度有限，因为整个表格宽度现在可以从容器中导出。

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

1 个答案: