HOWTO

Question

我想代表一个“得分”网格，有两个坐标：“系统”和“位置”。分数是0到5之间的数值，而另外两个坐标是字符串。

我必须将其表示为兼容IE7的HTML表格，但我遇到了很多问题：

由于标题（“location”）是字符串，它们比单元格（数字）占用更多的位置，因此我失去了很多空间（特别是因为位置字符串可能很长）。所以有问题：

我希望能够旋转我的标题。

我能够使用各种jQuery插件（截图中使用的插件为this one），它可以在各种导航器中工作（请参阅here），但它们都不能在IE7中工作（请参阅here）

没有jQuery，使用

filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;

我能够旋转文本，但是它的容器仍然没有适应新的尺寸（参见here）：宽度没有减小，高度没有增加。所以，使用这个：

表tr：第一个孩子{身高：200px; }

我修复了第一行的高度（这不完美，因为我不知道单元格内容有多长，但仍然......），但这并没有改变单元格宽度：请参阅{{3} }。使用这个：

表tr：第一个孩子td {宽度：30px; }

没有改变任何东西，宽度仍然是旋转前所需的宽度。

现在，我想知道是否有办法在IE7下工作，如果可能的话没有固定的高度/宽度（如here）。此外，也许有另一种方式来表示我的数据而不是HTML表：

可能是带有垂直图例的散点图
使用大jQuery网格插件，比如jqGrid：但是，我需要找一个可以旋转表头的
使用PNG替换文本标题。但是，我的表中可能有超过400列，这会有效吗？

总结一下，这是我的问题：

是否有任何与IE兼容的jQuery网格插件，能够旋转标题？
是否可以使用CSS甚至Javascript使here在IE中工作？

谢谢，

PS：我的限制是IE兼容（至少IE7，更好的IE6，但如果不可能，这是不可能的。），不要避免使用JavaScript。当我可以尝试不使用它时，但如果需要，它将在客户端机器上可用。但是，我使用的JS库仍然需要兼容IE7。

Answer 1

我终于能够使用jQuery和RaphaelJS做我想做的事。

技巧：将文本转换为SVG以便于操作。因为这都是使用JavaScript完成的，所以这不会改变网页语义。

HOWTO

HTML

<table>
    <thead>
        <tr>
            <th><div id="column1"><span>aaaaaaaaaaa aaaaaaaa</span></div></th>
            <th><div id="column2"><span>bbbbbbb bbbbbbbbbbbb</span></div></th>
            <th><div id="column3"><span>ccc cccccccccccccccc</span></div></th>
            <th><div id="column4"><span>ddd ddd dddddddddddd</span></div></th>
            <th><div id="column5"><span>eee eee eee eee eee </span></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
            <td>IV</td>
            <td>V</td>
        </tr>
    </tbody>
</table>

正如您所看到的，在每个列标题中，我们创建一个div，每次都使用不同的id（使用Django，我使用对象ID）如果我们想稍后独立操作每个列，使用内联span ，然后是内容。

的Javascript

然后，使用以下代码（在页面的开头，但不在，更好的是在：

之后）

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

您需要调整数值（当然，除了-90）以适应您的单元格大小。 当然，您必须在代码中导入jQuery和RaphaelJS。我使用了jquery-1.8.2.min.js和raphael-min.js，两者都可以在各自的项目网站上找到。 / p>

CSS

当然，您可以使用自己的CSS，但如果您在内联文本中遇到困难，请尝试使用RaphaelJS的.attr（...）函数。记住你必须用R.text（...）行链接它们：

R.text(...).attr(...).attr(...).rotate(-90, true);

最终渲染

我能得到这样的东西：

Final render http://ompldr.org/vZnhhdw

下一步

我现在的下一步是将细胞内容对齐到底部，请参阅here。

如何用HTML表示垂直标题文本的网格？

1 个答案:

HOWTO

HTML

的Javascript

CSS

最终渲染

下一步