Question

我有一个充满数据的表，通常很容易管理，但有时我们会得到一个包含非常长的数据的列（通常是一个URL）。包装不是一种选择，因为垂直空间比水平空间更珍贵。

我提出的选项是基本上在某些列上设置一个最小宽度（由用户标记），所以如果用户的浏览器宽度足以处理它，他们将看到整个字符串，如果没有他们会看到一个截断的版本。我知道overflow属性对表格单元格不起作用，但幸运的是我们已经将所有单元格内容都包含在<div>中，所以我应该可以这样做。

这是我当前代码的小提琴：http://jsfiddle.net/brandondurham/nK9LA/

你会在CSS中看到我试图在第5列设置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”。：）

Answer 1

除非我误解，否则请将min-width更改为max-width以使内容截断：http://jsfiddle.net/blineberry/nK9LA/7/

更新（因为我确实误解了）：

我会使用媒体查询来调整不同浏览器宽度的width或max-width设置。在此示例中，当屏幕宽度小于500px时应用max-width: 100px;：http://jsfiddle.net/blineberry/nK9LA/22/embedded/result/

可以为不支持respond.js的浏览器填充媒体查询。

隐藏溢出内容的灵活表

1 个答案: