隐藏溢出内容的灵活表格
我有一个充满数据的表，通常非常易于管理，但有时我们会得到一个包含非常长的数据的列（通常是 URL）。环绕不是一种选择，因为垂直空间比水平空间更宝贵。
我提出的选项基本上是在某些列上设置最小宽度（由用户标记），因此如果用户的浏览器足够宽来处理它，他们将看到整个字符串，如果不是，他们将请参阅删节版本。我知道溢出属性实际上对表格单元格不起作用，但幸运的是我们已经将所有单元格内容包装在
这是我当前代码的小提琴： http://jsfiddle.net/brandondurham/nK9LA/
您将在 CSS 中看到我尝试在第五列设置 min-width：
table th:nth-child(5),
table td:nth-child(5) {
width: 1px; }
table th:nth-child(5) a,
table td:nth-child(5) span {
background: rgb(180,180,180);
min-width: 40px;
text-overflow: ellipsis; }
但是，它不起作用。当浏览器太小而无法显示整个字符串时，我基本上需要该列来隐藏溢出的内容（最小宽度为 40px）。
关于如何实现这一目标的建议？
哦，请注意，我的标签中没有列出“Javascript”。 :)
I have a table full of data that's typically pretty manageable, but on occasion we'll get a column with data that's incredibly long (usually a URL). Wrapping isn't an option as vertical space is more precious than horizontal.
The option I've proposed is to basically set a min-width on certain columns (to be flagged by the user), so if the user's browser is wide enough to handle it they will see the entire string, and if not they'll see a truncated version. I know the overflow property doesn't really work on table cells, but fortunately we already have all cell contents being wrapped in a <div> so I should be able to do this.
Here is a Fiddle with my current code: http://jsfiddle.net/brandondurham/nK9LA/
You'll see in the CSS I'm trying to set a min-width on the 5th column:
table th:nth-child(5),
table td:nth-child(5) {
width: 1px; }
table th:nth-child(5) a,
table td:nth-child(5) span {
background: rgb(180,180,180);
min-width: 40px;
text-overflow: ellipsis; }
However, it's not working. I basically need that column to hide the overflown content (with a min-width of 40px) when the browser is too small to display the entire string.
Suggestions on how to pull this off?
Oh, and notice I don't have "Javascript" listed in my tags. :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
除非我误解了，否则将
min-width更改为max-width以截断内容：http://jsfiddle.net/blineberry/nK9LA/7/更新（因为我确实误解了）：
我会使用媒体查询来调整不同浏览器宽度下的
width或max-width设置。在此示例中，当屏幕宽度小于 500 像素时，将应用max-width: 100px;：http://jsfiddle.net/blineberry/nK9LA/22/embedded/result/媒体查询可以为以下浏览器进行填充：不支持respond.js。
Unless I'm misunderstanding, change
min-widthtomax-widthto get the content to truncate: http://jsfiddle.net/blineberry/nK9LA/7/UPDATE (since I did misunderstand):
I would use media queries to adjust a
widthormax-widthsetting at different browser widths. In this example, amax-width: 100px;is applied when the screen is less than 500px wide: http://jsfiddle.net/blineberry/nK9LA/22/embedded/result/Media queries can be polyfilled for browsers that don't support with respond.js.