सीएसएस के साथ आवर्ती तालिका शीर्ष पाठ

बदल देती है यह लगता है कि यह निम्नलिखित के साथ संभव होना चाहिए:सीएसएस के साथ आवर्ती तालिका शीर्ष पाठ

.verticalText 
{   
    /* IE-only DX filter */ 
    writing-mode: tb-rl; 
    filter: flipv fliph; 

    /* Safari/Chrome function */ 
    -webkit-transform: rotate(270deg); 

    /* works in latest FX builds */ 
    -moz-transform: rotate(270deg); 
}

यह IE में काम करता है।

सफारी, क्रोम और एफएक्स में एक विचित्र तरीके से यह गलत हो जाता है - सेल का आकार से पहले पाठ घुमाया जाता है! http://jsfiddle.net/HSKws/

मैं एक समाधान के रूप गतिशील छवियों का उपयोग कर रहा है, हालांकि कि also has its problems:

screenshot of bug

यहाँ एक डेमो है। मैं इसके साथ एक पतन के रूप में खुश हूं, लेकिन ऐसा लगता है कि इस सीएसएस के काम को बनाने का एक तरीका होना चाहिए - यह लगभग वहां है।

कोई भी ट्रांसफॉर्म लागू होने के बाद सामग्री को फिट करने के लिए कोई तरीका जानता है?

स्रोत

2009-04-04 Keith

एफएफ 3 में, हेडर घुमाए नहीं जाते हैं (क्या आपका टेस्ट पेज सही तरीके से स्थापित है? कोई सीएसएस शैली नहीं है एस "लंबवत" वर्ग "है, लेकिन ऐसा इसलिए हो सकता है क्योंकि सीएसएस एफएफ 3 के लिए मान्य नहीं है) –

माफी - मार्कअप में स्थापित शैलियों को देख सकते हैं, वे फायरबग में दाएं हाथ के सीएसएस फलक में दिखाई नहीं देते हैं –

FF3 में काम नहीं करता है क्योंकि यह डेवलपर दस्तावेज़ों के अनुसार FF3.5 तक समर्थित नहीं है। https://developer.mozilla.org/En/CSS/-moz-transform – AnthonyWJones

'ट्रांसफॉर्म' आपके द्वारा घोषित किए गए पूरे तत्व के अभिविन्यास को बदलता है, न कि इसके अंदर की टेक्स्ट सामग्री। यह 'लेखन-मोड' की तुलना में आईई की 'मैट्रिक्स' संपत्ति की तरह है।

महत्वपूर्ण रूप से, तत्व को बदलने से यह नहीं बदलता कि इसकी सामग्री का आकार कैसा है (या उसके माता-पिता का लेआउट उस आकार से कैसे प्रभावित होता है)। ऊर्ध्वाधर और क्षैतिज आकार के लिए सीएसएस के एल्गोरिदम अलग-अलग हैं और जिनके साथ होने का अधिकार प्राप्त करना मुश्किल है; मनमाने ढंग से घूर्णन के साथ सामग्री को समायोजित करने के लिए कोई वास्तविक निरंतर तरीका नहीं है। तो 'ट्रांसफॉर्म' 'स्थिति: रिश्तेदार' का उपयोग करने जैसा है: यह सामग्री बदलता है, लेकिन लेआउट आकार के साथ कुछ भी नहीं करता है।

तो यदि आप किसी तालिका में एक को शामिल करना चाहते हैं तो आपको अपेक्षाकृत घुमावदार 'चौड़ाई' को समायोजित करने के लिए सेल की 'ऊंचाई' को स्पष्ट रूप से सेट करने की आवश्यकता होगी। यदि आप पहले से नहीं जानते हैं कि आप इसे जावास्क्रिप्ट के साथ संभावित रूप से हैक कर सकते हैं।

FWIW: मेरे लिए Fx3.1b3 पर स्पैन भी दूसरों की तरह घूमता है। हालांकि विंडोज़ पर इसके क्षैतिज-विरोधी एंटी-एलियासिंग (क्लियरटाइप) के साथ प्रतिपादन बहुत अच्छा नहीं लग रहा है ... एक अच्छी तरह से प्रस्तुत छवि काफी बेहतर हो सकती है।

स्रोत

2009-04-04 13:40:09 bobince

यह एक एक्सएचटीएमएल दस्तावेज़ में इनलाइन एसवीजी का उपयोग कर सकता है (मैं केवल परीक्षण किया सफारी और Firefox):

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
    <table border="1"> 
     <tr> 
      <td>&#160;</td> 
      <td> 
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150"> 
        <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text> 
       </svg> 
      </td> 
      <td> 
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150"> 
        <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text> 
       </svg> 
      </td> 
      <td> 
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150"> 
        <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text> 
       </svg> 
      </td> 
     </tr> 
     <tr> 
      <td>Example row header</td> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
    </table> 
    </body> 
</html>

दुर्भाग्य से, आप स्पष्ट रूप से चौड़ाई और अपनी मेज कोशिकाओं की ऊंचाई का अनुवाद स्थापित करने के लिए किया है एसवीजी का उपयोग कर पाठ प्रस्तुत किया गया। साथ ही, फ़ाइल एक्सटेंशन xhtml होना चाहिए।

-webkit-writing-mode:vertical-rl;

जो तुम एक div के लिए लागू कर सकते हैं:

स्रोत

2010-08-18 18:57:46

धन्यवाद, मैं इसे देख लूंगा। यह सुरुचिपूर्ण लग रहा है :) – EarlyPoster

यह एक अच्छा विचार है। मैं जावास्क्रिप्ट कैनवास का भी उपयोग कर सकता था। हालांकि दोनों मामलों में मुझे कोशिकाओं की चौड़ाई और ऊंचाई को स्पष्ट रूप से सेट करने की आवश्यकता है - अगर मैं ऐसा कर सकता हूं तो सीएसएस ट्रांसफॉर्म भी काम करने के लिए बनाया जा सकता है। मेरी समस्या यह है कि मुझे इन कोशिकाओं में पाठ के सटीक आकार को नहीं पता है; मुझे सामग्री को फिट करने के लिए उन्हें खींचने की आवश्यकता है। – Keith

आईई 9 में काम नहीं कर रहा है। –

यह उपकरण सभी मेरे लिए सोच ...

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

स्रोत

2011-02-14 06:57:13 doublejosh

वेबकिट जोड़ा गया है था।

स्रोत

2011-12-07 00:37:46

में काम नहीं करता जो 90 डिग्री घुमाता है, और 270 डिग्री नहीं ... –

जैसा कि मैंने a similar question पर उत्तर दिया, मैंने इसे a jQuery plugin by David Votrubec और ब्लॉग पोस्ट के नीचे माइक द्वारा टिप्पणी का हल किया।

इसे एक में रखें।js फ़ाइल:

(function ($) { 
    $.fn.rotateTableCellContent = function (options) { 
    /* 
Version 1.0 
7/2011 
Written by David Votrubec (davidjs.com) and 
Michal Tehnik (@Mictech) for ST-Software.com 
*/ 

var cssClass = ((options) ? options.className : false) || "vertical"; 

var cellsToRotate = $('.' + cssClass, this); 

var betterCells = []; 
cellsToRotate.each(function() { 
var cell = $(this) 
, newText = cell.text() 
, height = cell.height() 
, width = cell.width() 
, newDiv = $('<div>', { height: width, width: height }) 
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' }); 

newInnerDiv.css('-webkit-transform-origin', (width/2) + 'px ' + (width/2) + 'px'); 
newInnerDiv.css('-moz-transform-origin', (width/2) + 'px ' + (width/2) + 'px'); 
newDiv.append(newInnerDiv); 

betterCells.push(newDiv); 
}); 

cellsToRotate.each(function (i) { 
$(this).html(betterCells[i]); 
}); 
}; 
})(jQuery);

और यह अपने पेज के शीर्ष पर:

<script src="rotatetablecellcontent.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.yourtableclass').rotateTableCellContent(); 
    }); 
</script>

और यह अपने सीएसएस में:

/* Styles for rotateTableCellContent plugin*/ 
table div.rotated { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    writing-mode:tb-rl; 
    white-space: nowrap; 
} 

thead th { 
    vertical-align: top; 
} 

table .vertical { 
    white-space: nowrap; 
}

तो सुनिश्चित करें कि आपके तालिका वर्ग "yourtableclass है बनाना ", और यह कि सभी टीडी जिन्हें आप घूमना चाहते हैं, वे वर्ग" लंबवत "हैं।

यहां a demo running in a jsFiddle है।

आशा है कि यह किसी की मदद करे, भले ही मैं दो साल देर हो!

स्रोत

2012-08-25 20:57:19

यह समाधान मेरे लिए बहुत अच्छा काम करता है। वर्तमान एफएफ और आईई 9 (कम से कम) में। – Tillito

आदेश में अपने तालिका हेडर के अंदर का पाठ घुमाया की है:

प्लेस divs अंदर हेडर सामग्री - बारी बारी से हैडर ही इन divs बजाय
सेट स्थिति: तालिका हेडर th पर रिश्तेदार, स्थिति: घुमावदार divs पर पूर्ण।
th हेडर की ऊँचाई स्थापित भी

हो गया।

आप इसे यहाँ देख सकते हैं:

enter image description here

कौन सा तो आप इस पेज पर देख सकते हैं अगर आप अपनी विंडो पतला बनाने - 1000 पिक्सेल से कम है और यह तालिका हेडर घूमता है - http://www.rugbydata.com/

यहाँ मैं जिस कोड का उपयोग करता था:

div.rotatabletext { 
-webkit-transform: rotate(-90deg); 
/* Firefox */ 
-moz-transform: rotate(-90deg); 
/* IE */ 
-ms-transform: rotate(-90deg); 
/* Opera */ 
-o-transform: rotate(-90deg); 
/* Internet Explorer */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
width:0px; 
text-align:left; 
height:0px; 
margin-left:0px; 
margin-top:0px; 
bottom:2px; 
position:absolute; 
} 
table.tournamentresults > * > tr > td { 
padding:1px; 
} 
table.tournamentresults > thead > tr:nth-child(1) > th:nth-child(1) { 
height:70px; 
position:relative; 
} 
table.tournamentresults > thead > tr:nth-child(2) th { 
height:70px; 
position:relative; 
}

स्रोत

2014-01-29 20:32:58

आप भी जोड़ सकते हैं ... सफेद-स्थान: अब्रैप; ... कई शब्दों के साथ मदद करने के लिए – bashaus

सीएसएस के साथ आवर्ती तालिका शीर्ष पाठ

उत्तर

संबंधित मुद्दे