Przekształcanie w pionie tekstu wewnątrz komórki nagłówka tabeli HTML

Question

Używam następujących css do obracania tekstu w komórkach nagłówka tabeli, ale komórki nagłówka mają tę samą szerokość, co w przypadku tekstu poziomego. Jak mogę po prostu obrócić tekst i szerokość zmniejsza się automatycznie ..

table#MyTable tr th a{ 
    color: #FFFFFF; 
    display: block; 
    /*Firefox*/ 
    -moz-transform: rotate(-90deg); 
    /*Safari*/ 
    -webkit-transform: rotate(-90deg); 
    /*Opera*/ 
    -o-transform: rotate(-90deg); 
    /*IE*/ 
    writing-mode: tb-rl; 
    filter: flipv fliph; 
    padding: 60px 1px; 
} 

Answer 1

Pozbądź padding:60px 1px; (o ile jest to potrzebne z innego powodu ... ale to, co jest przyczyną problemu).

Przykład: http://jsfiddle.net/purmou/sSP8W/

Answer 2

Jeśli trzeba dostosować tylko szerokość komórki i zawierają tylko jeden wiersz tekstu każdy może to zrobić: http://jsfiddle.net/sSP8W/3/ - zestaw width elementu na jego line-height.

Problem z transformacjami CSS3 polega na tym, że działają jak CSS "position: relative: ich oryginalne pudełko pozostaje takie samo, więc obracanie, pochylenie itp. Nie powoduje zmian wymiarów elementu. Tak więc: naprawdę nie ma doskonałego rozwiązania CSS, możesz użyć JS, aby dostosować wymiary, lub spróbuj znaleźć hackety obejścia. Więc jeśli masz tylko linki w tabeli, możesz zrobić coś takiego: http://jsfiddle.net/sSP8W/4/ - obracanie samego stołu.

Jeśli Twoja sprawa zawiera inną treść, której nie chcesz obracać - zaktualizuj wpis, abyśmy mogli spróbować znaleźć lepsze rozwiązanie.

UPD: Właśnie dowiedziałem rozwiązanie tekście obracane w tabelach: używając magii z pionowych uszczelek moglibyśmy uczynić komórki rozciągają się do treści, więc spójrz na to prawie ostatecznej przykład: http://dabblet.com/gist/4072362

Answer 3

Rozwiązałem to za pomocą a jQuery plugin by David Votrubec i komentarz Mike poniżej post na blogu.

umieścić to w pliku .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); 

I to w górnej części strony:

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

I to w CSS:

/* 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; 
} 

Następnie upewnij się, że Twój stół ma klasę "yourtableclass", i że wszystkie TD, które chcesz obrócić, mają klasę "pionową". To jest .

Mam nadzieję, że pomoże komuś, nawet jeśli spóźnię się rok!

Answer 4

Mody: przepraszam, że ten wpis "odpowiada na odpowiedź". Ale nie mam potrzebnej karmy, aby ją skomentować. Złap 22.

Kod w odpowiedzi i fiddl @ jobjorn zależy od szerokości komórki, aby obliczyć wysokość nagłówka, co prowadzi do błędnych wysokości, gdy dowolna komórka jest szeroka. Ten zmodyfikowany skrzypce używa nagłówka szerokość tekstu zamiast: http://jsfiddle.net/marvmartian/76z82/

cellsToRotate.each(function() { 
     var cell = $(this); 
     var s = '<div id="killme" style="position:absolute; top:-10000px; left:-10000px;"><span id="string_span" style="font-weight: bold; font-size: 1em">'+ 
      cell.text()+'</span></div>'; 
     $(window).append(s); 
     var width = $('#string_span').width(); 
     var newText = cell.text() 
      , height = cell.height() 
      //, width = cell.width() 
      , newDiv = $('<div>', { height: width, width: height }) 
      , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' }); 

Answer 5

W IE i Chrome (Migotanie i Webkit), można umieścić tekst w dziecka z trybu zapisu pionowego zamiast przy użyciu transformacji. Zapisuje wszystkie sztuczki CSS i JavaScript. W tej chwili Chrome ma niewielki błąd wyświetlania (Chrome 37), ale został zgłoszony.

.vertical { 
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
} 

<td><span class="vertical">This text should be vertical.</span></td> 

Polecam używanie white-space:nowrap na pionowym tekście w tabeli.

Answer 6

Powyżej teraz w Chrome łamie się teraz solution by jobjorn, ponieważ obsługuje on tryb pisania od początku 2016 r., Więc zasadniczo próbuje obrócić tekst dwukrotnie, a kończy się nieprawidłowo ułożonym tekstem poziomym. Z mojego punktu widzenia Firefox i Safari zapewne również to wkrótce będą wspierać, co spowoduje, że również oni się złamią. Po pewnym walić głową w ścianę, naprawiłem to przez zmianę CSS:

@supports not (writing-mode:vertical-rl) { 
    table div.rotated { 
     -webkit-transform: rotate(270deg); 
     -moz-transform: rotate(270deg); 
     white-space: nowrap; 
    } 
} 

@supports (writing-mode:vertical-rl) { 
    table div.rotated { 
     writing-mode:vertical-rl; 
     -webkit-transform: rotate(180deg) translate(8px,0px); 
     -moz-transform: rotate(180deg) translate(8px,0px); 
     white-space: nowrap; 
    } 
} 

tłumaczeniu 8 pikseli został co zajęło wyrównanie wyglądać prawo w moim konkretnym przykładzie. Twój przebieg może się różnić. Obrót o 180 stopni polegał na tym, aby górna część tekstu była skierowana w lewo zamiast w prawo. Jeśli tego nie potrzebujesz, prawdopodobnie możesz pominąć transformacje w drugiej części.

W JavaScript, musisz również upewnić się, że nie przesuwasz punktu początkowego dla ostatnich transformacji, ponieważ był on potrzebny tylko wtedy, gdy korzystałeś z transformacji, aby wykonać orientację pionową, więc zawinąłem tę część w ramach warunkowego:

var supportsWM = CSS.supports('writing-mode', 'vertical-rl'); 
if (!supportsWM) { 
    newInnerDiv.css('-webkit-transform-origin', (width/2) + 'px ' + (width/2) + 'px'); 
    newInnerDiv.css('-moz-transform-origin', (width/2) + 'px ' + (width/2) + 'px'); 
}