表頭文本轉換

我已經使用transform：rotate（270deg）作爲表頭，但由於頭部中的名稱不相等（甚至不接近），它看起來很醜，所以我必須使每列的寬度相等。表頭中的一些文本由2或3個字組成，有些是單個字。表頭文本轉換

這是它的樣子：http://img571.imageshack.us/img571/9527/tbl.png

所有我想要的，就是每列具有相同的寬度，無論是在報頭名多久，名放是在2行最多。

編輯：例子：

.header { 


-webkit-transform: rotate(270deg); 
-moz-transform: rotate(270deg); 
-ms-transform: rotate(270deg); 
-o-transform: rotate(27deg); 
transform: rotate(270deg); 
white-space: pre-line; 
width: 50px; 
height: 180px; /* to be adjusted: column is not always tall enough for text */ 
margin: 0 -80px; 
vertical-align: middle;

}

來源

2013-01-11 Nutic

我不能幫你沒有看到相關的代碼。請提供所有HTML和CSS來展示問題，但沒有任何不相關的內容。 – KatieK

你是否在頭文件中定義了每個''的寬度和高度？ – Mooseman

添加本說明書中：

table { width: 100%; table-layout: fixed; }

執行此：

表和列的寬度是由表和col 元素的寬度，或通過細胞的第一行的寬度設定。中的單元格不會影響列寬。

，並且需要具有指定的寬度。有關更多信息，請參見https://developer.mozilla.org/en-US/docs/CSS/table-layout。

來源

2013-01-11 19:26:25 KatieK

-1

OK！我做了一個研究，似乎瀏覽器在轉換後不會計算dimansions。

Rotate Text as Headers in a table (cross browser)

我覺得你有隻有一個選項及其：JavaScript的;

找到自己一個很好的行高度並在頁面加載後調整寬度。

來源

2013-01-11 18:30:48 Lupus

然後它覆蓋另一個。不起作用。 – Nutic

一些代碼會很有用 – Lupus

現在有代碼和示例 – Nutic

這是最好的我走到這一步：

$(document).ready(function() { 

    (function() { 
    var maxW = 0, 
     maxH = 0; 

    $("td.header").each(function() { 

     $cell = $(this); 

     $dummyDiv = $("<div></div>", { 
     text: $cell.text() 
     }); 

     // Replaces the original text for a DummyDiv to figureout the cell size before the rotation 
     $cell.html($dummyDiv); 

     if ($cell.width() > maxW) maxW = $cell.width(); 
     if ($cell.height() > maxH) maxH = $cell.height(); 
    }); 

    $("td.header").each(function() { 
     // Applies the rotation and then the size previosly calculated 
     $(this) 
     .addClass("rotate") 
     .width(maxH + 10) 
     .height(maxW + 10); 
    }); 
    })(); 
});

你可以看到現場演示在這裏：http://jsfiddle.net/Lrr3G/

我希望能幫助:)

來源

2013-01-11 23:31:45 cacoroto

表頭文本轉換

回答

相關問題