javascript - 如何在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%;
}
JS 小提琴片段:
解决方案
尝试这个
<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>
推荐阅读
- r - 将具有成对列的宽数据框压缩为两列
- c# - xamarin android 绑定将类 final int 字段更改为 ac# 枚举
- php - 无法在 PHP 中注销
- php - 迁移到实时网站后,会话变量被销毁
- c# - C# JSON 到类
- cordova - ERROR TypeError: Object(...) is not a function / ionic3 flurry-analytics plugin
- android - 如何在 GridLayout 中将 ImageView 居中?
- python - asyncio:调度其他工作项的工作项
- angular - 使用订阅函数获取无法读取未定义
- ibm-midrange - 系统周期时态表和 FOREIGN KEY... ON DELETE CASCADE