使用twitter引导程序表时旋转表头

Question

我已设法在桌子上旋转列的标题，因此我仍然遇到以下问题：

这是我的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>

我试过尝试更改行和列的高度，看看这些单词是否适合列，但我没有运气。有什么想法吗？

Answer 1

你可以在％中使用伪元素和垂直填充来强制绘制正方形。  见http://www.w3.org/TR/CSS2/box.html#padding-properties和http://www.w3.org/TR/CSS2/box.html#propdef-margin-top basicly：

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

如果为％，

会将元素的宽度作为参考来计算垂直padding。这里50％x 2 =元素的width

的100％

然后，您可以应用transform:rotate(xxdeg)并将其设置为transform-origin。 您的代码可以用于年轻的浏览器：

.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;
}

这适用于很少的内容，似乎可以使用简短的<th>标题。

IE6将需要一个额外的元素而不是伪。我没有照顾IE行为。但你有写作模式，在我看来更像是你需要的。 http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx