转换在HTML和CSS中旋转表头
出于某种原因，我需要在HTML和CSS中执行此（丑陋）表。我发现transform属性的旋转值可以帮助我，但我真的不能像图片中那样完成。图片来自Word文档。
是否有工具可以在HTML和CSS中创建类似的表？
3 个答案:
答案 0 :(得分：2)
尝试这样做.. 根据我们的项目要求，灵活性是必要的。这也是对电子邮件模板的内联CSS支持。
<!doctype html>
<head>
<style type="text/css">
td{
border:1px solid;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="width: 1000px; margin: 0px auto; border-spacing: 0px ! important;">
<tbody>
</tbody>
<thead>
<tr>
<td style="width: 20%;text-align: center;">No</td>
<td style="width: 40%;text-align: center;">1</td>
<td style="width: 40%;text-align: center;">2</td>
</tr>
</thead>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 30%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 1</p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>2</p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>3</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 1</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>2</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>3</p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 4</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>5</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>6</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>7</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 1</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>2</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>3</p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 4</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>5</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>6</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>7</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 30%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 30%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
<tr>
</tr>
</tbody>
</table>
</body>
</html>
答案 1 :(得分：1)
固定高度只需要在单元格中设置一个额外的元素即可旋转和平移。
您需要将宽度虚拟地减小到零并将宽度（=最小宽度）设置为td。 请参阅下面的代码段：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
table,
th,
td {
border-spacing: 0;
border: 1px solid;
text-align: center;
}
.rt {
height: 150px;/* fixed height . set fixed width to rotated elements */
}
.rt td {
vertical-align: top;
width: 3em;
/* allow about 2 lines in rotated cells */
}
.rt .rotated {
width: 130px;/* a liitle less than parents height */
transform: rotate(270deg) translatex(-100%);
transform-origin: top left;
}
.nowidth {
margin-right: -130px; /* reduce virtually width needed */
}<table>
<thead>
<tr>
<th colspan=3>th</th>
<th colspan=3>th</th>
</tr>
</thead>
<tbody>
<tr class="rt">
<td>
<div class="rotated nowidth">
content to rotate
</div>
</td>
<td>
<div class="rotated nowidth">
content to rotate okay
</div>
</td>
<td>
<div class="rotated nowidth">
content to rotate
</div>
</td>
<td>
<div class="rotated nowidth">
content to rotate
</div>
</td>
<td>
<div class="rotated nowidth">
content to rotate
</div>
</td>
<td>
<div class="rotated nowidth">
content to rotate
</div>
</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</tbody>
</table>
答案 2 :(得分：0)
table, td, th {
border-spacing: 0;
border: 1px solid;
border-collapse: collapse;
text-align: center;
table-layout: fixed;
width: 100%;
}
.vert > td > div {
overflow: hidden;
}
.vert > td > div > div {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
line-height: 1em;
}
.vert > td > div:before {
content: "";
height: 0;
padding-top: 100%;
display: inline-block;
vertical-align: middle;
}<table>
<thead>
<tr>
<th colspan=3>th</th>
<th colspan=3>th</th>
</tr>
<tr class="vert">
<td><div><div>The first rotated header goes here</div></div></td>
<td><div><div>The second rotated header goes here</div></div></td>
<td><div><div>The third rotated header</div></div></td>
<td><div><div>One more rotated header</div></div></td>
<td><div><div>And even more</div></div></td>
<td><div><div>And the last one</div></div></td>
</tr>
</thead>
<tbody>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</tbody>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？