使用下面的code，又深受this的问题，我设法在一个HTML表格垂直列标题，与Internet Explorer兼容。现在，每一个细节我需要设置的头垂直alignement：我想有我的头固定在其行的底部

Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row.

$(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();
});
});

通过这个code，我能够得到这样的结果：

With this code, I am able to get this result :

正如你所看到的，头转动，但没有对准自己小区的底部，我想他们是。我尝试使用：

As you can see, the headers are rotated but not aligned to the bottom of their cells, I'd like them to be. I tried using :

vertical-align: bottom;

但是，这并没有改变任何东西。

But that didn't change anything.

和还后或在JS code中的.rotate指令前补充一点：

And also to add this after or before the .rotate instruction in the JS code :

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

在.rotate指令前放置，这只是做头消失。当放置在.rotate指令后，我有更好的结果，但仍然不是我想要的，因为头被垂直排列根据他们的最后一个字符：

When placed before the .rotate instruction, this just made the headers disappear. When placed after the .rotate instruction, I had better results, but still not what I want, as the headers are vertically aligned based on their last character :

怎么会调整这些标题的第一行的底部，为了得到这样结果呢？

How could I align these headers to the bottom of the first row, in order to get such result ?

谢谢

雨果

推荐答案

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

在旋转前，用这样一来，在它的开始对齐文本

before the rotation, use this one to align the text at its start

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

MDN实况为文本锚