तालिका शीर्षलेख पाठ

Question

मैंने ट्रांसफॉर्म का उपयोग किया है: तालिका शीर्षलेख के लिए घुमाएं (270deg), लेकिन चूंकि उस शीर्षलेख में नाम बराबर नहीं हैं (यहां तक ​​कि करीब भी नहीं) यह बदसूरत दिखता है, इसलिए मुझे हर कॉलम बराबर चौड़ाई बनाना है। तालिका शीर्षलेख में कुछ पाठ 2 या 3 शब्दों से बना है, कुछ एक शब्द हैं।

यहाँ है कि यह कैसे की तरह दिखता है:, http://img571.imageshack.us/img571/9527/tbl.png

सभी मैं चाहता हूँ कि प्रत्येक स्तंभ में एक ही चौड़ाई है, चाहे कितना लंबा नाम शीर्षक में है, और नाम 2 पंक्तियाँ अधिकतम में होने की डाल दिया।

संपादित करें: उदाहरण:

http://jsfiddle.net/SvAk8/

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

}

Answer 1

इस विनिर्देश जोड़े

तालिका और स्तंभ चौड़ाई मेज और col तत्वों की चौड़ाई से या कोशिकाओं की पहली पंक्ति की चौड़ाई से स्थापित कर रहे हैं । में कक्ष पंक्तियों की चौड़ाई को प्रभावित नहीं करते हैं।

और निर्दिष्ट चौड़ाई की आवश्यकता है। अधिक के लिए https://developer.mozilla.org/en-US/docs/CSS/table-layout देखें।

Answer 2

ठीक है! मैंने एक पुनर्विक्रय किया और ऐसा लगता है कि ब्राउजर ट्रांसफॉर्म के बाद आयामों की गणना नहीं करेंगे।

Rotate Text as Headers in a table (cross browser)

मैं तुम्हें केवल एक ही विकल्प है और इसकी मिला लगता है: जावास्क्रिप्ट;

अपने आप को एक अच्छी लाइन ऊंचाई ढूंढें और पृष्ठ लोड के बाद चौड़ाई का आकार बदलें।

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

करता है:

Answer 3

सबसे अच्छा है कि मैं अब तक क्या मिला:

$(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/

मुझे आशा है कि मदद कर सकते हैं :)