出于某种原因，我需要在 HTML 和 CSS 中制作这个（丑陋的）表格。我发现变换属性的旋转值可以帮助我，但我真的不能像图片中那样做。图片来自Word文档。
是否有工具可以在 HTML 和 CSS 中创建类似的表格？
【问题讨论】：
尝试这样做.. 根据我们的项目要求，灵活性是必要的。这种内联 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>
【讨论】：
td 的宽度取决于它不旋转时的宽度。
固定高度只需要在单元格中设置一个额外的元素即可旋转和平移。
您需要将宽度虚拟减小为零并将宽度（=最小宽度）设置为 td 。 参见下面的代码 sn-p：
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>【讨论】：
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>【讨论】：