转换旋转HTML和CSS中的表格标题
出于某种原因,我需要用HTML和CSS来制作这个(丑陋的)表格。我发现变换属性的旋转值可以帮助我,但我真的不能像图片中那样做。图片来自Word文档 有没有一个工具可以在HTML和CSS中创建这样的表转换旋转HTML和CSS中的表格标题,html,css,transform,Html,Css,Transform,出于某种原因,我需要用HTML和CSS来制作这个(丑陋的)表格。我发现变换属性的旋转值可以帮助我,但我真的不能像图片中那样做。图片来自Word文档 有没有一个工具可以在HTML和CSS中创建这样的表 固定高度只需在单元格中设置一个额外的元素即可旋转和平移 实际上,您需要将宽度减少到零,并将宽度(=最小宽度)设置为td。 请参阅下面的代码片段: 表格, th, 运输署{ 边界间距:0; 边框:1px实心; 文本对齐:居中; } .rt{ 高度:150px;/*固定高度。设置旋转元素的固定宽度*/
固定高度只需在单元格中设置一个额外的元素即可旋转和平移 实际上,您需要将宽度减少到零,并将宽度(=最小宽度)设置为td。 请参阅下面的代码片段:
表格,
th,
运输署{
边界间距:0;
边框:1px实心;
文本对齐:居中;
}
.rt{
高度:150px;/*固定高度。设置旋转元素的固定宽度*/
}
.rt td{
垂直对齐:顶部;
宽度:3em;
/*在旋转的单元格中允许大约2行*/
}
.rt.旋转{
宽度:130px;/*比父母身高小一英寸*/
变换:旋转(270度)translatex(-100%);
变换原点:左上角;
}
诺维兹先生{
右边距:-130px;/*减少所需宽度*/
}
th
th
满足于轮换吗
可以轮换吗
满足于轮换吗
满足于轮换吗
满足于轮换吗
满足于轮换吗
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
运输署
尝试这样做。。
根据我们的项目要求,灵活性是必要的。这种内联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>
运输署{
边框:1px实心;
}
不
1.
2.
一,
二,
三,
一,
二,
三,
四,
五,
六,
七,
一,
二,
三,
四,
五,
六,
七,