如何将html表从水平旋转到垂直

Question

我把公共汽车的座位做成了水平的。这是通过一张桌子完成的。然而，该表现在是一个水平变体。对于手机，我需要在不打乱代码的情况下使其垂直。

我试图通过转换(rotate90deg(来完成，得到了所需的结果，但表与文本合并。如何使用transform(rotate90deg(向下移动表，或者是否有其他css解决方案？

<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="seat.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>

总线方案水平

垂直css变换的总线方案旋转

Answer 1

您可以将css样式添加到中

<td style = "display: flex; flex-direction: row"> 

或者设置类名并在css文件中执行。