使用垂直方向的文本创建HTML表格作为表格标题 [英] Creating HTML table with vertically oriented text as table header

问题描述

我想创建一个垂直书写文本作为标题的HTML表格（即标题文字旋转90度）。我正在使用下一代风格

 < th style = -  webkit-transform：rotate（90deg）; writing-mode： tb-rl; -moz-transform：rotate（90deg）; -o-transform：rotate（90deg）; white-space：nowrap; display：blocking; padding-left：1px; padding-right：1px; padding-top： 10px; padding-bottom：10px;align =leftid =＃COLUMN_HEADER_NAME＃>＃COLUMN_HEADER＃< / th> 
  

在MS IE 9.x中显示OK。在Firefox和Chrome中，标题似乎浮在表格的顶部，与表格下方的表格重叠。有人可以帮忙吗？我简单不知道为什么会发生这种情况。我从本教程开始： http://scottgale.com/blog / css-vertical-text / 2010/03/01 /

TIA，Tamas

解决方案

我不相信用CSS单独旋转内容时，你可以获得< th> 的高度。以下是我如何用一些jQuery来做到这一点。

http://jsfiddle.net/tsYRQ/1004/

I would like to create a HTML table with vertically written text as header (i.e. header text is rotated 90 degrees). I am using the flollowing style

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left"  id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

In MS IE 9.x is displays OK. In Firefox and Chrome the header seems to float over the top of the table, it overlaps with the table rows below it. can somebody please help? I simple have no idea why is this happening. I started out with this tutorial: http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA, Tamas

解决方案

I don't believe you can get the height of the <th> to change when rotating it's contents with CSS alone. Below is how I do this with a bit of jQuery.

http://jsfiddle.net/tsYRQ/1004/

这篇关于使用垂直方向的文本创建HTML表格作为表格标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！