Html 旋转表内的svg图像，但td不旋转'；t随高度和宽度变化

我现在正在学习CSS，但我现在有点迷路了。我想要实现的是一个3x4

表格

，其中包含SVG。我必须将图像旋转90度，但之后我会在下面显示发生了什么。问题是

表中的
td
不跟随宽度。我不知道这是桌子的基本行为还是什么，但花了几个小时的研究，什么也没发现。

以下是我所拥有的：

.game img {
  display: inline-block;
  transform: rotate(90deg);
}

.game {
  margin: auto;
}

.game td {
  vertical-align: middle;
  text-align: center;
}

table,
th,
td {
  border: 1px solid black;
}

旋转的元素占据了它们在不旋转的情况下所占据的空间（这在您发布的图像中也很明显），这可能会导致重叠

可能的解决方案是1.）给
td
一个等于图像高度的
min width
，或2.）将图像本身更改为正方形（高度=宽度），如果需要，其他区域是透明的，或3.）将图像保存在旋转状态并使用该状态。
感谢编辑，我的第一语言不是英语：）。解决方案1基本可行，但单元的高度仍然太大。我为表格设置了
display:inline block
，因此无法设置
max height
。Sokution 2和3不是一个选项，因为项目中有大量svg文件。