3

对于我无法解决的一些风格问题，我真的可以使用一些帮助：

设想：

在 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 隔间中的那个，从而更改表格布局。您会看到行为发生了变化。

我的问题：

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

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

直到现在我都没有成功。但我只是所有这些时尚网络东西的血腥初学者......

4

1 回答 1

1

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

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

于 2012-10-07T10:21:32.777 回答