I'm rendering a table that represents (pretty much) the layout of a parking lot:

The thing is, I want to rotate the grey cells containing the parking space number 90 degrees, to look like this:

I understand I have to use transform: rotate(90deg) with different combinations of css attributes (like transform-origin, position, etc) but I don't understand these very well so I'm unable to achieve what I want.

This is the code as it is:

HTML

          <div  if:true={cocherasNivel}>
            <template for:each={cocherasNivel.pasillos} for:item="pasillo">
                <div key={pasillo.nroPasillo} >
                    <template for:each={pasillo.filasCocheras} for:item="fila">
                        <div key={fila.nroFila} >
                            <div >
                                <table  if:true={fila.cocheraIzquierda}>
                                    <tr>
                                        <td >{fila.cocheraIzquierda.Codigo_de_Cochera__c}</td>
                                        
                                        <td  if:true={fila.cocheraIzquierda.aptoAsignado}>{fila.cocheraIzquieda.aptoAsignado.Unidad__c}</td>
                                        <td  if:false={fila.cocheraIzquierda.aptoAsignado}>LIBRE</td>
                                    </tr>
                                </table>
                            </div>
                            <div ></div>
                            <div >
                                <table  if:true={fila.cocheraDerecha}>
                                    <tr>
                                        <td  if:true={fila.cocheraDerecha.aptoAsignado}>{fila.cocheraDerecha.aptoAsignado.Unidad__c}</td>
                                        <td  if:false={fila.cocheraDerecha.aptoAsignado}>LIBRE</td>
                                        
                                        <td >{fila.cocheraDerecha.Codigo_de_Cochera__c}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>

CSS

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

.codigo-cochera{
    min-width: 2px;
    max-width: 2px;
    background-color:lightgrey;
    text-align:center;
    font-weight:600;
}

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

Any help would be greatly appreciated! Sadly CSS isn't my strong suit at all...

CodePudding user response：

Try using the CSS writing-mode property instead of transform

CSS writing-mode Property w3schools