使 HTML table 可跨分辨率缩放

Question

我正在尝试创建一个 table 在多种分辨率下保持相同的纵横比和大小。

以下是我正在构建的 table 的一些特征：

可以有任意数量的行和列。
每个 td 的最小高度应始终为 50 像素，最小宽度应始终为 120 像素；
某些 <td> 将有一个 div 与 td 的整个高度。
table 应按 5:12 宽高比放大，同时占据尽可能多的屏幕宽度和高度。

A fiddle 展示了我正在努力实现的目标：http://jsfiddle.net/ymbkpstn/

纯 CSS 这可能吗？最好是 CSS 2.1?

Answer 1

很简单，只要跟随css就会对你有所帮助。

td div
{
    position:absolute;
    top:0;
}
td
{
    position:relative;
}

勾选Fiddle here.

Answer 2

直到现在我已经放弃了使用 position:absolute 作为 div 的想法，因为当你将 position:relative 添加到带有边框折叠的 td 时，它使得边界不可见。经过一番谷歌搜索后，我发现解决方案涉及在 td 上使用 background-clip:padding-box。然而，这会导致子 div 比父 td 小 1px。所以我的最终解决方案是将以下 css 应用于 div:

td div
{
  position:absolute;
  top:-1px;
  bottom:0;
  left:-1px;
  right:0px;
}

Fiddle:https://jsfiddle.net/ymbkpstn/22/

使 HTML table 可跨分辨率缩放

Making an HTML table scalable across resolutions

html

css

html-table