如何在行边界截断表溢出？答案

【问题标题】：How can I truncate table overflow at a row boundary?如何在行边界截断表溢出？
【发布时间】：2011-05-06 07:36:09
【问题描述】：

我在一个可以有任意行的 div 中有一个表。有时，行会扩展以容纳多行文本。 div 有一个固定的高度和溢出：隐藏。

我的问题是，是否可以截断表格以使溢出发生在行边界上？

例如，有没有办法做到这一点：

看起来像这样：

主要的问题是这个不能使用Javascript。这在 HTML/CSS 中可行吗？如有必要，我可以在代码隐藏（ASP.NET Webforms）中做一些事情，尽管我想避免它。

它必须在 IE7 和 IE8 中工作。显示的行数不是固定的 - 它取决于有多少行溢出额外的文本。

【问题讨论】：

【解决方案1】：

除非您戴上那顶 JavaScript 魔术帽，否则您无法删除专门被 div 溢出剪切的行。 CSS 不知道你的内容是如何呈现的——这取决于浏览器。

您可以通过执行以下操作来隐藏任意行之后的每一行：

#somediv #sometable tr:nth-child(5) ~ tr {
    display: none;
}

唯一真正的问题是，虽然 IE7 和更新版本支持 ~，但只有 IE9 支持 :nth-child()。你可以通过堆叠多个 + 组合子来解决这个问题，但你最终会得到一个相当长的选择器：

#somediv #sometable tr:first-child + tr + tr + tr + tr ~ tr {
    display: none;
}

如果您的表中有太多行，限制页面代码隐藏中的行数可能会更好，因为您可以通过削减额外的几百个字节来节省一些带宽，否则这些字节会被传输但没见过。

【讨论】：

抱歉，我在 OP 中忘记了一些警告。它必须在 IE7 和 IE8 中工作。显示的行数不是固定的 - 它取决于有多少行溢出额外的文本。感谢您的帮助，这肯定更接近我的需要。
哦，是的，带宽/性能不是问题，但无论如何感谢您的提示。
@Martin：有很多+s 在IE7+ 中工作，但是使用CSS 和screen 样式你只能选择任意行并从那里截断。