使HTML表格跨分辨率可伸缩

我试图创建一个表，在多个分辨率下保持相同的纵横比和大小

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

可以有任意数量的行和列

每个td的最小高度应为50px，最小宽度应为120px

某些

会在td的整个高度上有一个div

表格应按5:12的纵横比放大，同时尽可能占据屏幕宽度和高度

一把小提琴展示了我想要实现的目标：

---

这在纯CSS中可能吗？最好是CSS 2.1？

这是一个简单的方法，只需遵循CSS即可帮助您

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

---

检查

直到现在，我已经放弃了对div使用

位置：绝对

的想法，因为当您将

位置：相对

添加到带有边框折叠的

td

时，它使边框不可见。通过谷歌搜索，我发现解决方法是在td上使用

背景剪辑：padding box

。但是，这会导致子

div

比父

td

小1px。因此，我的最终解决方案是对div应用以下css：

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

---

Fiddle:

为什么要在CSS 2.1中使用它？现在是CSS3，为什么不在IE8中使用

display:table

和

display:table cell

呢。检查我说的，如果没有其他选择，我对CSS3没问题。添加相对位置会使边界消失。。。请看：@Erric这是因为您删除了

边框折叠：折叠从表中。但我需要边框折叠，无论如何我在这里看到了解决方案：@Erric然后使用
背景剪辑：填充框检查：这正是我发布的链接的内容。