Html Make Height Proportional To The Width

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.

Solution 1:

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.

Fiddle

Solution 2:

If you are able to size your table with viewport sizing, I think this is achievable.

For example if your table is sized at 100vw (full screen width) and you have ~7% width columns (or ~7vw), then you could set the height of the table cell to be calc(0.75 * ~7vw).

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

You could add calculations to the table as well (doesn't have to be 100vw, just based off of the viewport).

Are you able to use viewport sizing for the table?

Solution 3:

If you can run some javascript on drag. You could have a class on cells when empty that adds the padding and remove that class from the cell once something has been dragged into it. So, when generating your html make sure that each cell has an empty class on it. Then remove that class when dragging something into it. If the cell can be emptied, then you'd have to re-apply the class. All these operations can be done during a drag. To determine whether a cell is empty just see if it has the empty class on it.