html - 您将如何实现一些文本旋转 90° 的 Web UI

Question

我有一个显示表格的 View :

• 行代表天 - 每天一行
• 列代表我的组实体 - 每个列标题显示组名称和一个 + 图标，该图标将组扩展为几个代表组元素的附加列；所以基本上我有可扩展的列分组；一次只会扩展一组；

当用户点击组名称旁边的 + 时，应该向该表添加一系列列，每个列代表这些组元素中的每一个的日历数据。换句话说，一个组将扩展到它的元素。如果到目前为止已显示任何其他组，它将在新组展开之前收缩。

我的表单是 Ajax 驱动的。当页面加载时，只有日历 worw 被填充并且组标题被添加到列中。

问题

1. 我一开始并不确定如何实现这个表？我应该使用 table 元素还是使用 float 的 div/ul？所有内容单元格(不是标题，也不是带有日历日期的第一列)都具有相同的维度，因此我可以使用除表格以外的其他内容。为什么我倾向于 div/ul 实现？因为有了 float ，动态加载代表组元素的附加列会更容易。我想这使用表来实现会很棘手，因为我们不能有列组，因为我们可以有列行的 TBODY 元素(不可能转置此数据)。

   <

2. 由于我的列宽也必须相同，所以我必须垂直显示组名和元素名。这样所有列的宽度都将相同，但它们必须在 IE(如果可能的话 V7+)、FF 和 CH 中以这种方式显示文本。

问题

1. 您建议如何完成此 View (使用 table 或 div/ul 元素)？您还可以提出一个我没想到的完全不同的替代方案；也许你自己实现了类似的东西......

2. 如何可靠地旋转标题文本？我在 IE 上看到过矩阵过滤器，在 mozilla 和 webkit 浏览器上看到过转换，但文本看起来位于原始内容框之外。我也见过 SVG 实现，但我不知道它的浏览器支持(AFAIK IE 不支持它没有插件)。

3. 有没有一种方法可以保持列的宽度相同但不使用文本旋转？

Answer 1

回答问题2:

您遇到的问题可能是因为 IE 的 filter 旋转和标准 CSS3 旋转使用不同的旋转点 - 即元素旋转所围绕的点。

一个使用元素的左上角，另一个使用中心点。

据我所知，最好的跨浏览器轮换引用站点是:http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

希望对您有所帮助。