旋转表格内的svg图片，但td不遵循高度和宽度

问题描述

我现在正在学习CSS，但是我有点迷失了。我要实现的是其中包含SVG的3x4 table。我必须将图像旋转90度，但之后我将在下面显示情况。问题是td中的table没有遵循宽度。我不知道这是否是表的基本行为或其他某种行为，但是花了数小时的研究却没有找到任何东西。

这就是我所拥有的：

.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.）将min-width赋予td，使其等于图像的高度，或者2.）将图像本身更改为正方形（高度=宽度），如果需要，其他区域是透明的，或者3。）将图像保存为旋转状态并使用。