要解决这个问题,可以使用CSS中的transform属性,而不是使用旋转的方法,这样可以防止旋转单元格时出现的边框和背景颜色的问题。以下是一个示例代码:
HTML代码:
旋转 | 普通 |
CSS代码: table { border-collapse: collapse; }
table td { padding: 10px; border: 1px solid black; }
.rotate { white-space: nowrap; /* 设置旋转前的单元格宽度和高度 / width: 1px; height: 1px; transform-origin: top left; / 旋转90度 */ transform: rotate(90deg); }
这个例子中,我们使用了transform属性,把单元格旋转了90度,同时添加了transform-origin属性来设置旋转的原点。为了使单元格的内容具有正确的尺寸,我们设置了它的宽度和高度,并使用white-space: nowrap;来防止单元格内容换行。这样确保了单元格旋转时背景颜色不会覆盖边框。