- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 CSS 问题。我有一个表格,其宽度和高度是窗口的百分比,并且希望隐藏单元格溢出(垂直和水平)。从研究来看,似乎很明显溢出不能很好地处理表格或百分比,但是当我尝试同时修复这两个问题时,这些修复特别有问题。
对于我正在尝试制作的内容,我对其他解决方案持开放态度:一个 week x time calendar 裁剪长单元格内容而不是拉伸(stretch)。 (我也希望他们 text-overflow:ellipsis
,甚至还没有到达那里。)我希望日/小时索引行/列比其他的更短/更薄细胞。我考虑过使用一堆 div,但因为 1. display:block;
通常会把网格分开,并且 2. 我很挣扎,我想寻求帮助。
(^区别:tr {display:block;}
vs tr {display:inline-block;}
。当窗口->table shrinks and shift the most rights cell to a row by itself. 第二个是在缩小窗口时隐藏右边的单元格——我想裁剪它的部分内容,而不是留下一个大的空白列——然后移动整个表格相对于#encloser。
^这两个有问题,让我很沮丧,但它们隐藏了溢出而不是拉伸(stretch)表格,并且单元格彼此对齐。在 jfiddle 中更接近我想要最终构建的东西......
...摆弄不同类的显示要么使表忽略我想限制它的高度和溢出(删除 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 个]
,最右边的单元格宽度将换行/隐藏,我假设边框中有额外的像素。我想我已经提供了足够多的损坏代码,但我也遇到了边框不显示(单元格移动并覆盖它们)和单元格间距的问题,而单元格间距应该没有。
感谢阅读
最佳答案
改变
#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;
}
关于css - 与溢出 :hidden and percentage heights with HTML tables 作斗争,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24291219/
我是一名优秀的程序员,十分优秀!