使HTML表在各种分辨率下可扩展

Question

我正在尝试创建一个在多个分辨率下保持相同宽高比和大小的表。

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

1. 可以有任意数量的行和列。
2. 每个td应始终具有50px的最小高度和120px的最小宽度;
3. 某些<td>会有一个div与整个td的高度。
4. 表格应以5:12的宽高比放大，同时占用尽可能多的屏幕宽度和高度。

展示我正在努力实现的目标：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。所以我的最终解决方案是为div应用以下css：

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

小提琴：https://jsfiddle.net/ymbkpstn/22/