Question

我想生成一个具有相对大小的表。例如，我想要一个包含14列和1行的空表。行高应为一个单元格宽度的0.75。在这种情况下，有14列，一个单元格的宽度约为7％。

我使用空表的目的是：我使用html5提供的拖放功能。我想拖动一些东西并放入空桌的不同单元格中。

目前，我找到了使用填充在空时具有所需高度的方法。但是，填充问题是一旦你将一些东西拖入空单元格，它仍然会有空填充区域。

有人建议我该怎么办？

非常感谢！

Answer 1

如果您可以在单元格中放置DIV，则可以使用以下CSS来确保每个单元格的高度为其宽度的75％：

td {
  position: relative;
}

td > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

td:before {
  content: "";
  display: block;
  padding-top: 75%;
}

这是基于填充总是元素宽度而不是其高度的函数。

Fiddle

Answer 2

如果你可以在拖动时运行一些javascript。你可以在空单元格上有一个类，它可以添加填充，并在将某个类拖入单元格后从单元格中删除该类。因此，在生成html时，请确保每个单元格上都有empty类。然后在将内容拖入其中时删除该类。如果可以清空单元格，那么您必须重新应用该类。所有这些操作都可以在拖动期间完成。要确定单元格是否为空，只需查看其上是否有empty类。

Answer 3

如果您能够使用视口大小调整表格的大小，我认为这是可以实现的。

例如，如果您的表格大小为100vw（全屏宽度）并且您有~7％宽度列（或~7vw），那么您可以将表格单元格的高度设置为calc（0.75 * ~7vw）

table {
    width: 100vw;
}
tr {
    height: calc(0.75 * 7.1428vw);
}
td {
    width: 7.1428% /* or 7.1428vw */
}

您也可以向表中添加计算（不必是100vw，仅基于视口）。

您是否可以对表格使用视口大小调整？

html使高度与宽度成正比

3 个答案: