现在我已经将数据格式化为表元素。如何使标题位于每列数据的后面,并使标题始终偏离文本中心?另外,我如何将标题右对齐(注意,“单身”和“统计”标题中的最后一个字符垂直对齐)。
This is what I want it to look like
其中一个表的html是这样的(我使用react):
<table className="results-table">
<thead>
<tr>
<td>
<h1 className="heading">Singles</h1>
</td>
<td>
<h1 className="heading">a5</h1>
</td>
<td>
<h1 className="heading">a12</h1>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>34.23</td>
<td>44.42</td>
<td>23.34</td>
</tr> ...
</tbody>
</table>
编辑:我能够修改Andrei Fedorov的解决方案以满足我的约束。如果你有更简单或更好的解决方案,请随时回答。
th {
font-size: 70px;
color: var(--heading-color);
-webkit-text-stroke-color: var(--heading-color);
-webkit-text-stroke-width: 3px;
position: relative;
z-index: -1;
transform: scale3d(0.7, 1, 1) translate(-90%, 40%);
text-align: right;
}
1条答案
按热度按时间rjee0c151#