html make< td>高度与宽度成比例 [英] html make <td> height proportional to the width

问题描述

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

I would like to generate a table with relative sizes. For example, I would like an empty table with 14 columns and 1 row. The row height should be as 0.75 of the width of one cell. In this case, with 14 columns, one cell would be around 7% width.

我使用空表的目的是:我正在使用html5提供的拖放功能.我想拖东西并放入空表的不同单元格中.

The purpose that I'm using empty table is that: I'm using the drag and drop function provided by html5. I would like to drag something and drop into the different cells of the empty table.

目前，我发现了使用填充在空白时具有所需高度的方法.但是，填充的问题是，一旦将某些内容拖到空单元格中，它将仍然具有空的填充区域.

Currently, I found ways to using padding to have the desired height when it is empty. However, the problem with padding is once you drag something into the empty cell, it will still has the empty padding area.

有人建议我该怎么办?

非常感谢！

推荐答案

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

If you can place a DIV in your cells, you can use the following CSS to ensure that each cell's height is 75% of its width:

td {
  position: relative;
}

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

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

这是基于这样一个事实，即填充始终是元素宽度的函数，而不是元素高度的函数.

This is based on the fact that padding is always a function of an element's width, not its height.

小提琴

这篇关于html make< td>高度与宽度成比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！