Html 使用twitter引导表时旋转表头

我已经成功地旋转了表上列的标题，因此我仍然遇到以下问题：

以下是我的HTML和CSS：

  .box_rotate 
            {
                 -moz-transform: rotate(-90deg);  /* FF3.5+ */
                   -o-transform: rotate(-90deg);  /* Opera 10.5 */
              -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
                         filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
                     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
            }

<table class="table table-bordered">
        <tr style="height:5%;"><th style="width:2.5%">#</th><th style="width:25%;">Task</th><th>Progress</th><th><div class="box_rotate" style="height:10%;">Start Time</div></th><th>End Time</th><th style="width:2.5%">1</th><th style="width:2.5%">2</th><th style="width:2.5%">3</th><th style="width:2.5%">4</th><th style="width:2.5%">5</th><th style="width:2.5%">6</th><th style="width:2.5%">7</th><th style="width:2.5%">8</th><th style="width:2.5%">9</th><th style="width:2.5%">10</th></tr>
        </table>

.box\u旋转
{
-moz变换：旋转（-90度）；/*FF3.5+*/
-o变换：旋转（-90度）；/*Opera 10.5*/
-webkit变换：旋转（-90度）；/*Saf3.1+，镀铬*/
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）；/*IE6，IE7*/
-ms过滤器：“progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）”；/*IE8*/
}
#任务进度开始时间结束时间12345678910

---

我试着改变行和列的高度，看看这些词是否适合列，但我没有任何运气。有什么想法吗？

您可以使用伪元素和%的垂直填充来强制绘制正方形。 看到和 基本上：

element:before {
content:'';
padding:50% 0;
}

将元素的宽度作为参考，以计算垂直

填充
if%。此处50%x2=元素宽度的100%

然后可以应用
变换：旋转（xxdeg）
并将其设置为
变换原点
。
您的代码可以成为更年轻的浏览器：

.box_rotate /* if more tha one line, content should be wrap in a div displayed as inline-boxe */
{
  vertical-align:middle;
  -moz-transform: rotate(-90deg);  /* FF3.5+ */
  -o-transform: rotate(-90deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
  transform-origin:    center;

}
.box_rotate:before {
  content:'';
  display:inline-block;/* allow to vertical-center a box aside */
  vertical-align:middle;
  margin:0 -0.25em;
  padding-top:100%;
}
table, th {
  border:solid;
}

这只需要很少的内容，一个简短的
标题就可以了

IE6将需要一个额外的元素，而不是伪元素。我没有照顾你的行为。但你有写作模式，在我看来更像你需要的