最近在做手机端web页面，页面中需要有个表格来显示数据，但是由于数据太多页面太窄，table展示横向滑动的话感觉很丑。所以让表格竖向显示了
具体页面如下:
实现代码：当然代码里面绑定的数据啊什么的你都可以修改为自己的内容，我这直接粘贴了。
<table style="border-collapse:separate;border-spacing: 2px 10px;width: 100%;" id="mytable"><tbody><tr><td colspan="2">参数名称</td><td v-for="index in this.tableParams.length" :key="index"><input type="text" v-model="dataDetailFrom[`para${index}name`]" @focus="isEding"/></td></tr><tr><td colspan="2">茶品克重(g)</td><td v-for="index in this.tableParams.length" :key="index"><input type="text" v-model="dataDetailFrom[`para${index}weight`]" @focus="isEding"/></td></tr><tr><td colspan="2">泡茶温度(°C)</td><td v-for="index in this.tableParams.length" :key="index"><input type="text" v-model="dataDetailFrom[`para${index}temp`]" @focus="isEding"/></td></tr><tr><td>第一段</td><td><tr>水量(mL)</tr><tr>时长(s)</tr></td><td v-for="index in this.tableParams.length" :key="index"><tr><input type="text" v-model="dataDetailFrom[`para${index}waterL1`]" @focus="isEding"/></tr><tr><input type="text" v-model="dataDetailFrom[`para${index}time1`]" @focus="isEding"/></tr></td></tr><tr><td>第二段</td><td><tr>水量(mL)</tr><tr>时长(s)</tr></td><td v-for="index in this.tableParams.length" :key="index"><tr><input type="text" v-model="dataDetailFrom[`para${index}waterL2`]" @focus="isEding"/></tr><tr><input type="text" v-model="dataDetailFrom[`para${index}time2`]" @focus="isEding"/></tr></td></tr><tr><td>第三段</td><td><tr>水量(mL)</tr><tr>时长(s)</tr></td><td v-for="index in this.tableParams.length" :key="index"><tr><input type="text" v-model="dataDetailFrom[`para${index}waterL3`]" @focus="isEding"/></tr><tr><input type="text" v-model="dataDetailFrom[`para${index}time3`]" @focus="isEding"/></tr></td></tr><tr><td colspan="2">总水量(mL)</td><td colspan="5">7000</td></tr><tr><td colspan="2">总时长(s)</td><td colspan="5">5000</td></tr></tbody></table>样式代码：
主要代码就是：writing-mode: vertical-rl;
#mytable tr,td{border-bottom:1px solid #dedede;/* 表格横线 */text-align: center;}.mytr td:first-child{writing-mode: vertical-rl;text-align: center;padding: 5px;}.mytr input{text-align: center;}
