css - 与溢出 :hidden and percentage heights with HTML tables 作斗争

Question

我有一个 CSS 问题。我有一个表格，其宽度和高度是窗口的百分比，并且希望隐藏单元格溢出(垂直和水平)。从研究来看，似乎很明显溢出不能很好地处理表格或百分比，但是当我尝试同时修复这两个问题时，这些修复特别有问题。

对于我正在尝试制作的内容，我对其他解决方案持开放态度:一个 week x time calendar 裁剪长单元格内容而不是拉伸(stretch)。 (我也希望他们 text-overflow:ellipsis，甚至还没有到达那里。)我希望日/小时索引行/列比其他的更短/更薄细胞。我考虑过使用一堆 div，但因为 1. display:block; 通常会把网格分开，并且 2. 我很挣扎，我想寻求帮助。

http://jsfiddle.net/Y7s4e/2/

http://jsfiddle.net/Y7s4e/3/

(^区别:tr {display:block;} vs tr {display:inline-block;}。当窗口->table shrinks and shift the most rights cell to a row by itself. 第二个是在缩小窗口时隐藏右边的单元格——我想裁剪它的部分内容，而不是留下一个大的空白列——然后移动整个表格相对于#encloser。

^这两个有问题，让我很沮丧，但它们隐藏了溢出而不是拉伸(stretch)表格，并且单元格彼此对齐。在 jfiddle 中更接近我想要最终构建的东西......

http://jsfiddle.net/FvfMG/1/

...摆弄不同类的显示要么使表忽略我想限制它的高度和溢出(删除 table, tr display:block ) 或完全失去其网格结构(保留 display:block 设置) 或两者(尝试 tr {display:inline-block;} ) 但是 CSS 看起来几乎和不那么糟糕的那些完全一样，我一直没能找到错误。

从结构上讲，我在 tds 中有 div(我更愿意使用类似 td {display:inline-block} 的东西，但这不会产生相同的结果)。我为所有表格、tr、div 和 td 设置了显示、溢出、高度和宽度 %。我不知道那在哪里是必要的、有害的或无用的。 #encloser 是一个 div 来限制 jfiddle 中的表格大小(我试过没有 display 设置，溢出拉伸(stretch)它)。某些元素上有边框/背景，因此更容易看到发生了什么。

边框和 %s 也有问题。如果我的单元格宽度增加到 100% td {width:25%;} [每行 4 个]，最右边的单元格宽度将换行/隐藏，我假设边框中有额外的像素。我想我已经提供了足够多的损坏代码，但我也遇到了边框不显示(单元格移动并覆盖它们)和单元格间距的问题，而单元格间距应该没有。

感谢阅读

Answer 1

改变

#encloser {
position: absolute;
height:75%;
width:75%;
border:1px red solid;
}

以下内容

#encloser {
position: absolute;
height:75%;
width:75%;
min-width:400px;//choose a number to suit the optimal size
border:1px red solid;
}