出于某种原因，我需要用 HTML 和 CSS 制作这个(丑陋的)表格。我发现 transform 属性的旋转值可以帮助我，但我真的不能完全按照图片中的那样做。图片来自Word文档。
是否存在可以用 HTML 和 CSS 创建类似表格的工具？
最佳答案
尝试这样做.. 根据我们的元素要求，灵 active 是必要的。此内联 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>
关于html - 变换在 HTML 和 CSS 中旋转表头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34317922/