时间戳

首页 > 解决方案 > 在表格内旋转 svg 图像，但 td 不遵循高度和宽度

html - 在表格内旋转 svg 图像，但 td 不遵循高度和宽度

问题描述

我现在正在学习 CSS，但此时我有点迷失了。我想要实现的是一个table带有 SVG 的 3x4。我必须将图像旋转 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;
}

标签： htmlcsshtml-tablecss-transforms

解决方案

旋转的元素占用了没有旋转时它们会占用的空间（这在您发布的图像中也很明显），这可能导致重叠。

可能的解决方案是 1.) 给s 一个min-width等于td图像高度的值，或 2.) 将图像本身更改为正方形（高度 = 宽度），附加区域是透明的如果需要，或者 3.) 将图像保存在旋转状态并使用它。

推荐阅读