I have reorganized the bus seating layout horizontally using a table. However, I now need to transform it vertically for mobile phones without disrupting my existing code.
My attempt at using transform(rotate90deg) achieved the desired result, but the table ended up overlapping with the text. Is there a way to move the table down while still using transform(rotate90deg), or is there another CSS solution that would work better?
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<table class="">
<!--TODO переключнение этажей, подсветка занятых мест, подсветка выбранных мест-->
<tr v-for="stroka in mergeFlights.find(trip => trip.id_trip===busTriptId).bus_config[floor]" :key="stroka">
<td v-for="seat in stroka" :key="seat"
:rowspan="seat.split('+')[1]"
:colspan="seat.split('+')[2]"
align="center">
<div v-if="seat.split('+')[3].replace('_', '') !== ''" :class="se</div>at.split('+')[0]" :id="'seat_'+seat.split('+')[3].replace('_', '')">{{seat.split('+')[3].replace('_', '')}}</div>
<div v-else-if="seat.split('+')[0] == 'voditel'" :class="seat.split('+')[0]" :id="'seat_'+seat.split('+')[3].replace('_', '')">{{seat.split('+')[3].replace('_', '')}}</div>
</td>
</tr>
</table>vertical bus seating layout achieved with CSS transform rotate