1

我一直在尝试用以下内容布置表格：

  • 两列或三列自动调整大小以适应其中的内容
  • 根据表格的宽度调整大小的 1 到 4 列的任何位置，并截断其中的文本
  • 一列包含三个按钮，我希望它的宽度正好为220 像素

由于这个问题的答案，我得到了它几乎工作。我在前两列或三列设置“最小宽度”，在最后一列设置“宽度”，在中间的列中，我将文本包装在一个 div 中，然后在 td 和 on 上设置“最大宽度”我设置的 div width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;。所有这些都可以在 Chrome、Firefox 和 Safari 甚至 IE 10 上正常运行。

问题发生在 IE7、8 和 9 上。在所有三个“浏览器”上，中间的 div 不会截断，而是会推出列的宽度以适应所有文本，这会使表格比页面更宽。

我尝试table-layout: fixed;在 IE 上将 a 放在桌面上，但并没有得到我所期望的或任何理智的东西，而是我得到的是所有列都具有相同的宽度，而忽略了最后一列的“宽度：220px” tds，然后在布置完所有内容后，最后一列扩展为 220px，并炸毁了表格。如果您不明白我在说什么，请查看 http://jsfiddle.net/ptomblin/rHJk9/ 或 Chrome 或 Firefox 中的“检查元素”。如果您查看最后一列 td 的“布局”，它会显示与所有其他列相同的小宽度，即使内容是 220 像素宽。

在现场，将“ie8”类放在主体上是使用条件<IF IE8>代码完成的，但 jsfiddle 似乎不喜欢这样。

我正在寻找的要么是让表格在 IE7-9 上的工作方式与在真实浏览器上的工作方式相同（没有表格布局：固定），要么是一些至少适合的“足够好”的解决方法在屏幕上，有或没有表格布局：固定。

http://imgur.com/44DeZv5有一个在 IE9 上显示的屏幕截图。我添加了一条红线来显示桌子的实际边缘。请注意，该表中 td 中的按钮栏不仅超出了表，而且超出了实际的屏幕宽度。（浏览器设置为 1024x768，表格位于 940 像素宽的 .content div 内）

http://imgur.com/0Zielaf是 IE9 中没有“table-layout:fixed”时的样子

http://imgur.com/K8Ob6VR是在没有“table-layout:fixed”的情况下在 Chrome 上的样子。请注意它如何适合屏幕和表格。这就是我的目标。

4

1 回答 1

0

我发现了导致table-layout: fixed分配所有列的宽度完全相同的问题，无论width实际列值上的参数是什么：发生这种情况是因为表上的第一行有一个带有colspan="7". 我想通了，因为在W3Schools的描述中table-layout: fixed他们提到：

一旦收到第一行，浏览器就可以开始显示表格

这让我意识到它可能只看第一行。我卡在一个空列的虚拟第一行，但每个列都有适当的类以赋予它们适当的宽度，并且它的布局要好得多。（我还将这个虚拟行的字体大小、高度和行高、顶部和底部边距和填充设置为 0，这样它就不会分散注意力）

于 2013-05-09T00:19:32.440 回答