使用Twitter的引導表

我已成功地旋轉的列標題在表上這樣我仍然得到以下問題的時候旋轉表頭：使用Twitter的引導表

enter image description here

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

我試着努力改變的行和列的高度，看的話會融入列，但我沒有任何運氣。有任何想法嗎？

來源

2014-02-09 user481610

您可以使用僞元素和垂直填充％來強制繪製正方形。看到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 =元素的100％width

然後，您可以應用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

來源

2014-02-09 11:23:22

使用Twitter的引導表

回答

相關問題