Javascript 如何在html表格中创建垂直列？

我正在尝试创建如下表：

预期产量

---

但是电流输出是这样的：

如何使桌子垂直居中。当前输出是我可以使文本垂直，但文本不居中。我怎样才能达到预期的产量

---

这是密码

@foreach（$steps作为$step）
步骤{{$STEP['id']}
资源
笔记
@endforeach
.w-10-p{
宽度：10%；
}
.垂直文本{
变换原点：0；
变换：旋转（270度）；
}
.全宽{
宽度：100%；
}

---

JS小提琴片段： 链接：

试试这个

.tg{边框折叠：折叠；边框间距：0；}
.tg td{字体系列：Arial，无衬线；字体大小：14px；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；边框颜色：黑色；}
.tg th{字体系列：Arial，无衬线；字体大小：14px；字体大小：正常；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；边框颜色：黑色；}
.tg.tg-0pky{边框颜色：继承；文本对齐：左；垂直对齐：顶}
.tg.tg-0lax{文本对齐：左；垂直对齐：上}
第1行
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎
第2行
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎

您已经尝试了

垂直对齐：中间？共享要复制的完整最小代码。能否在代码段上共享html代码。我将尝试上传一个片段。谢谢你，请重新阅读我上面的评论。在所有浏览器中实现之前，您可能必须使用转换。但你知道如何设置边界。
<!-- HTML -->
<div class="row">
    <div class="col-lg-12 col-md-12 mt-4">
        @foreach ($steps as $step)
            <table class="full-width">
                <tbody>
                    <tr>
                        <td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
                            <label class="vertical-text text-center">STEP {{ $step['id']}}</label>
                        </td>
                        <td class="{{ $step['color'] }}-light p-2">Resources</td>
                        <td class="{{ $step['color'] }}-light p-2">Notes</td>
                    </tr>
                    <tr>
                        <td class="white"></td>
                        <td class="white"></td>
                    </tr>
                    <tr>
                        <td class="white"></td>
                        <td class="white"></td>
                    </tr>
                    <tr>
                        <td class="white"></td>
                        <td class="white"></td>
                    </tr>
                </tbody>
            </table>
        @endforeach
    </div>
</div>


<!--CSS PART-->
.w-10-p {
    width: 10%;
}

.vertical-text {
    transform-origin: 0 0;
    transform: rotate(270deg);
}

.full-width {
    width: 100%;
}