如何正确旋转表格td元素实现车位编号竖向显示

核心CSS修改方案 #

直接调整.codigo-cochera类的样式，结合transform、transform-origin及尺寸属性实现旋转并保持布局正常：

.codigo-cochera{
    /* 调整尺寸：旋转后高度适配文字宽度，宽度对应侧边占位 */
    width: 20px;
    height: 80px;
    background-color: lightgrey;
    font-weight: 600;
    /* 实现90度旋转 */
    transform: rotate(90deg);
    /* 设置旋转原点为单元格中心，避免偏移 */
    transform-origin: center center;
    /* 确保旋转后的文字在单元格内居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 稳定布局，防止旋转后影响其他元素 */
    position: relative;
}

table.cocheras, td.apto-cochera, td.codigo-cochera{
    border: 0.5px solid black;
}

.apto-cochera {
    min-width: 4px;
    max-width: 4px;
    text-align: center;
    font-weight:600;
}

关键属性说明 #

• width/height：旋转后单元格宽高逻辑互换，设置足够高度容纳文字，宽度控制侧边占位大小。
• transform: rotate(90deg)：直接实现文字90度旋转。
• transform-origin: center center：让元素围绕自身中心旋转，避免布局偏移。
• flex布局：替代原text-align，确保旋转后的文字在单元格内完美居中。
• position: relative：固定单元格在表格中的位置，防止旋转干扰其他元素布局。

额外优化（可选） #

如果左右两侧车位编号需要反向旋转（比如左侧顺时针、右侧逆时针），可以给对应TD添加差异化类：

1. 修改HTML：

<!-- 左侧车位编号 -->
<td class="codigo-cochera codigo-izquierda">{fila.cocheraIzquierda.Codigo_de_Cochera__c}</td>
<!-- 右侧车位编号 -->
<td class="codigo-cochera codigo-derecha">{fila.cocheraDerecha.Codigo_de_Cochera__c}</td>

2. 添加对应CSS：

.codigo-izquierda {
    transform: rotate(90deg);
}

.codigo-derecha {
    transform: rotate(-90deg);
}

内容的提问来源于stack exchange，提问作者joacoiudica