如何在html表格中制作垂直列？ [复制]答案

【问题标题】：How to make a vertical column in html table? [duplicate]如何在html表格中制作垂直列？ [复制]
【发布时间】：2020-06-10 07:45:09
【问题描述】：

我正在尝试创建这样的表：

预期输出

但是现在的输出是这样的：

如何使表格垂直居中。当前输出是我可以使文本垂直但文本不在中心。我怎样才能做出像预期的输出？

这是代码

<!-- 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%;
}

JS 小提琴片段：

链接：https://jsfiddle.net/bpkxaLth/

【问题讨论】：

你试过vertical-align: middle; ?
分享完整的最小代码以重现。
你能在sn-p上分享html代码吗
好的。我会尝试在sn-p中上传。谢谢大家
请重新阅读我上面的评论。在所有浏览器中实现sideways-* 之前，您可能必须使用转换。但是您知道如何设置边界。

标签： javascript php html css html-table

【解决方案1】：

试试这个

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-0pky" rowspan="2" style="transform: rotate(-90deg);text-alight:center;">Row1</th>
    <th class="tg-0pky">welcome</th>
    <th class="tg-0pky">welcome</th>
    <th class="tg-0pky">welcome</th>
  </tr>
  <tr>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
  </tr>
  <tr>
    <td class="tg-0pky" rowspan="2" style="transform: rotate(-90deg);">Row2</td>
    <td class="tg-0pky">welcome</td>
    <td class="tg-0pky">welcome</td>
    <td class="tg-0pky">welcome</td>
  </tr>
  <tr>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
  </tr>
</table>

【讨论】：