我想在 HTML5 中有一个这样的表格:
也就是说,第 2 列的标题旋转 270°,与底部垂直对齐,水平居中,黑色背景上的白色字体,但没有为标题行/列设置明确的高度,最好没有诉诸于使用 JavaScript 进行布局......
现在,直到现在,我都是通过使用像
这样的服务器端图像生成来实现的
<img src="handler.ashx?text=bla&fg=FFFFFF&bg=000000" />
不幸的是,这会禁用使用 CTRL + F
搜索文本,这很不幸,因为有很多组(数百个)。
现在SO上有一些帖子像
Rotate HTML SVG Text by 270 degrees
How to use CSS Rotate() in TH Table Tags
Rotating table header text with CSS transforms
https://jsfiddle.net/t5GgE/1/
但它们要么显式(或间接)设置高度,要么在表头中使用背景颜色时无法正常工作。
现在我所拥有的是:
https://jsfiddle.net/kn46f38n/6/
其中的问题是垂直对齐底部无法正常工作,并且高度不会自动调整(除非我添加 Canvas 图像)。
所有这些都相当令人沮丧,这基本上意味着唯一的进步是用 Canvas 替换了处理程序,这减轻了服务器的负担,但在可搜索性方面没有任何进步,最糟糕的是,使用 JS 进行布局虽然仍然有不支持 Canvas 的浏览器。
真的没有办法在 HTML/inlineSVG 中做到这一点而不必设置明确的高度(任何类型的高度,比如包括 transform-origin)并且不必求助于 javascript 吗?
没有 jQuery:
var maxH = 0;
// Find the column label with the tallest height
var hdrs = document.querySelectorAll(".hdr")
for (i = 0; i < hdrs.length; i++)
{
var bbox = hdrs[i].getBoundingClientRect();
if (bbox.height > maxH)
maxH = bbox.height;
}
// Make all the label cells that height
var cols = document.querySelectorAll(".col")
for (i = 0; i < cols.length; i++)
cols[i].style.height = maxH + "px";
最佳答案
啊,没关系,我自己搞定的。
秘诀在于它有 vertical-lr,因此宽度和高度已经正确。
然后你所要做的就是将文本以 transform-origin center 旋转 180 度......
适用于 Chrome 和 Firefox 以及 IE 11 和 10(根据 MDN 向后兼容 IE9,但由于 ms-transform-rotate 无法正常工作,如果您省略,它会优雅地降级为仅 writing-mode vertical-lr ms 转换)。
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https://web.archive.org/web/20160320101147/https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx
.blackhd
{
vertical-align: bottom;
width: 40px;
#height: 100px;
border: 1px solid hotpink;
background-color: black;
text-align: center;
}
.vert
{
display: inline-block;
color: white;
#font-weight: bold;
font-size: 15px;
writing-mode: vertical-lr;
#writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
transform-origin: center;
transform: rotate(180deg);
padding-top: 2mm;
padding-bottom: 3mm;
}
<table>
<tr>
<td class="blackhd"><span class="vert">abc</span></td>
<td class="blackhd"><span class="vert">defghijkl</span></td>
</tr>
<tr>
<td>abc</td>
<td>defghijklmnopqr</td>
</tr>
</table>
关于html - 在没有固定高度的 HTML/inlineSVG 中将文本旋转 270°?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35862398/