Question

我希望在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/

哪个问题是垂直对齐底部不能正常工作，高度不会自动调整（除非我添加画布图像）。

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

在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";

Answer 1

啊，没关系，我得到了自己。
秘诀是将它设为vertical-lr，因此宽度和高度已经正确。然后你要做的就是用变换原点中心将文本旋转180度......

适用于Chrome和Firefox以及IE 11＆amp; 10（根据MDN向后兼容IE9，但由于ms-transform-rotate不能正常工作，如果省略ms-transform，它会优雅降级为只写写模式vertical-lr）。

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://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx

.hideMe1 {
  animation: hideMe 10s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
.hideMe2 {
  animation: hideMe 10s 1;
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
}
@keyframes hideMe {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Answer 2

以下怎么样？只使用相当少的jQuery。

// Find the column label with the tallest height
var maxH = 0;
$(".hdr").each(function(i, item) {
  var bbox = $(item).get(0).getBoundingClientRect();
  if (bbox.height > maxH) {
    maxH = bbox.height;
  }
});

// Make all the label cells that height
$(".col").css('height', maxH + 'px');

.col
{
  background-color:black;
  width: 2em;
  line-height: 2em;
  vertical-align: bottom;
}

.hdr
{
  transform: rotate(270deg);
  transform-origin: left top 0;
  color: white;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="col"><div class="hdr">Test</div></td>
  <td class="col"><div class="hdr">Test 2</div></td>
  <td class="col"><div class="hdr">Objekt&uuml;bersicht</div></td>
  <td class="col"><div class="hdr">Test3</div></td>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
</table>

Answer 3

也不需要jQuery和SASS，但似乎需要最少的Javascript：https://jsfiddle.net/yy3pgvoy/

这是一个最小的解决方案。首先，HTML可以是这样的：

    <table>
        <tr id="headers">
            <td>Test</td>
            <td>Test 2</td>
            <td>Objektübersicht</td>
            <td>Test3</td>
            <td>Veni vidi vici</td>
        </tr>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
        </tr>
    </table>

标题文本直接放在TD中，然后Ctrl-F将正常工作。

然后，这个小小的脚本会计算标题的高度，看看旋转前TD的最大宽度。

var size = 0;
var cells = document.querySelectorAll("#headers > td");
Array.prototype.forEach.call(cells, function(e) {
    var rect = e.getBoundingClientRect();
    size = Math.max( size, rect.width );
    e.innerHTML = "<div class='rot'><span>" + e.textContent + "</span></div>";
});
var headers = document.querySelector("#headers");
headers.style.height = Math.ceil( size ) + "px";
headers.className = "rotate";

最后，你可以拥有这个CSS：

td { width: 32px; text-align: center; }
#headers > td {
    position: relative;
    line-height: 32px;
    font-weight: bold;
    color: #fff;
    background: #000;
    white-space: nowrap;
    padding: 0 1ex;
    text-align: center;
    vertical-align: bottom;
}
#headers.rotate > td { width: 32px; max-width: 32px; white-space: normal; padding: 0; }
#headers.rotate > td > div
{
    position: relative;
    display: block;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    overflow: show;
    transform: rotate(-90deg);
}
#headers.rotate > td > div > span
{
    position: absolute;
    left: 1ex;
    display: inline-block;
    white-space: nowrap;
    line-height: 32px;
}

我刚刚使用transform而没有所有浏览器的例外情况，但很容易添加所有供应商前缀。

在没有固定高度的HTML / inlineSVG中旋转文字270°？

3 个答案: