How to rotate td element correctly

September 2, 2022

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 class="slds-grid" if:true={cocherasNivel}>
            <template for:each={cocherasNivel.pasillos} for:item="pasillo">
                <div key={pasillo.nroPasillo} class="slds-col">
                    <template for:each={pasillo.filasCocheras} for:item="fila">
                        <div key={fila.nroFila} class="slds-grid">
                            <div class="slds-col slds_size-1-of-3">
                                <table class="cocheras" if:true={fila.cocheraIzquierda}>
                                    <tr>
                                        <td class="codigo-cochera">{fila.cocheraIzquierda.Codigo_de_Cochera__c}</td>
                                        
                                        <td class="apto-cochera" if:true={fila.cocheraIzquierda.aptoAsignado}>{fila.cocheraIzquieda.aptoAsignado.Unidad__c}</td>
                                        <td class="apto-cochera" if:false={fila.cocheraIzquierda.aptoAsignado}>LIBRE</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="slds-col slds_size-1-of-3"></div>
                            <div class="slds-col slds_size-1-of-3">
                                <table class="cocheras" if:true={fila.cocheraDerecha}>
                                    <tr>
                                        <td class="apto-cochera" if:true={fila.cocheraDerecha.aptoAsignado}>{fila.cocheraDerecha.aptoAsignado.Unidad__c}</td>
                                        <td class="apto-cochera" if:false={fila.cocheraDerecha.aptoAsignado}>LIBRE</td>
                                        
                                        <td class="codigo-cochera">{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…