1

使用下面的代码，并受到这个问题的启发，我设法在 HTML 表中使用垂直列标题，与 Internet Explorer 兼容。现在我需要设置的最后一个细节是标题垂直对齐：我想让我的标题固定在他们行的底部。

$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});

使用此代码，我可以获得以下结果：

旋转的标题未对齐
（来源：ompldr.org）

如您所见，标题已旋转但未与单元格底部对齐，我希望它们如此。我尝试使用：

vertical-align: bottom;

但这并没有改变什么。

并且还要在 JS 代码中的 .rotate 指令之后或之前添加它：

.attr({'text-anchor': 'end'});

当放置在 .rotate 指令之前时，这只会使标题消失。当放置在 .rotate 指令之后时，我得到了更好的结果，但仍然不是我想要的，因为标题是根据它们的最后一个字符垂直对齐的：

垂直对齐尝试 http://ompldr.org/vZnhiOQ

我怎样才能将这些标题对齐到第一行的底部，以获得这样的结果？

谢谢，

雨果

4

1 回答 1

1

代替

.attr({'text-anchor': 'end'});

在旋转之前，使用这个在开始处对齐文本

.attr({'text-anchor': 'start'});

MDN 文档text-anchor

于 2012-10-18T10:27:18.163 回答