如何解决旋转表格内的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。)将图像保存为旋转状态并使用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。