Jak obrócić tekst w nagłówku tabeli o 90 stopni zachowując wielolinijkowy tekst?

0

Witam. Tworzę tabelę i potrzebuję uzyskać m. in. takie nagłówki:
screenshot-20230324112001.png

Niestety text-orientation nie działa w sposób porządany. tekst nadal jest poziomo i rozjeżdza się

.verticalText {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

Wycinek z inspekcji:

<table class="table reportTable" id="reportTable0" style="width: 100%;">
   <thead>
      <tr>
         <th rowspan="2">
            <div class="verticalText">L.p.</div>
         </th>
         <th rowspan="2">
            <div class="verticalText">st., Imię i Nazwisko</div>
         </th>
         <th rowspan="2">
            <div class="verticalText">Jednostka organizacyjna</div>
         </th>
         <th rowspan="2">
            <div class="verticalText">Numer pokoju</div>
         </th>

Mogę Was prosić o pomoc?

0

O to mordo chodziło?
111111.jpg

.verticalText {
position:absolute;
top:50%;   
transform:rotate(270deg);
}
0

Twój przykład jest dobry dla małej tabeli. Ale kiedy dochodzi wiele linii tekstu i to wszystko musi sie do siebie dopasowywać to sie robi niezłe zamieszanie.

<!DOCTYPE html>
<html>
    <head>
		
    </head>
    <body>
		<table style="width: 100%">
			<thead>
				<tr>
					<th><div style="writing-mode: vertical-rl; text-orientation: mixed; height: 64px">testowy tekst który będzie zakotwiczony</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
					<th><div>testowy tekst który będzie wpisany</div></th>
				</tr>
			</thead>
		</table>
    </body>
</html>

screenshot-20230324124107.png
Tutaj działa mi prawidłowo. Potem sprawdzę na żywym przykładzie i dam znać :)

0

Już wiem co jest nie tak. Html generował sie poprawnie. problem pojawia się, gdy chcę z pomocą jsPdf wygenerować PDF. Czy to nie obsługuje tych poleceń czy jak? :O

1
gswidwa1 napisał(a):

Już wiem co jest nie tak. Html generował sie poprawnie. problem pojawia się, gdy chcę z pomocą jsPdf wygenerować PDF. Czy to nie obsługuje tych poleceń czy jak? :O

Tak, konwertery HTML -> PDF nie mają 100% pokrycia.
Dobre Javowskie mają 99% ;) ale nie 100%. Zakładajac dobrą wolę, ale zbyt szybko to się zmienia

1 użytkowników online, w tym zalogowanych: 0, gości: 1