相关疑难解决方法(0)

我使用以下css旋转表头单元格内的文本,但标题单元格的宽度与文本是水平的相同.如何旋转文本,宽度将自动减少..

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

我想在 HTML5 中有一个这样的表格：

也就是说，第 2 列的标题旋转 270°，垂直对齐底部，水平居中，黑色背景上的白色字体，但没有为标题行/列设置明确的高度，最好不必求助于使用 JavaScript 进行布局...

现在，直到现在，我通过使用服务器端图像生成来做到这一点，
<img src="handler.ashx?text=bla&fg=FFFFFF&bg=000000" />
不幸的是，这会禁用使用 搜索文本CTRL + F，这是相当不幸的，因为有很多组（数百个）。

现在有一些关于 SO 的帖子，例如将
HTML SVG 文本旋转 270 度
如何在 TH 表标签中使用 CSS Rotate()
使用 CSS 转换旋转表格标题文本
https://jsfiddle.net/t5GgE/1/

但是它们要么明确地（或间接地）设置高度，要么在表格标题中使用背景颜色无法正常工作。

现在我到目前为止是这样的：https :
//jsfiddle.net/kn46f38n/6/

其中的问题是垂直对齐底部无法正常工作，并且高度不会自动调整（除非我添加画布图像）。

所有这些都相当令人沮丧，这基本上意味着唯一的进展是用画布替换处理程序，这减轻了服务器的负担，但在可搜索性方面没有任何进展，而且最糟糕的是，使用 JS 进行布局，而有仍然是不支持画布的浏览器。

真的没有办法在 HTML/inlineSVG 中做到这一点，而不必设置显式高度（任何类型的高度，比如包括变换原点），也不必求助于 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 …