Witam.
W jaki sposób wykorzystując CSS zbudować tabelę jak poniżej z nazwą wiersza obróconą o 90°?
Odpowiedź (1)
Zaloguj się, aby móc oceniać, komentować, odpowiadać...
-
0
Do komórki TD warto by było wstawić jakiś element, np. DIV (możemy mu też przypisać jakąś klasę), któremu przypisujemy w CSS właściwość {transform:rotate(270deg);}, a do DIV-a wprowadzamy tekst np. w znaczniku P
Nie zaszkodziłoby też zdefiniowanie szerokości elementu DIV oraz rozmiarów komórki tak, żeby przypadkiem element nie "wyłaził" ze swojej komórki.
Poniżej zawartość przykładowego, bardzo uproszczonego pliku tabeli HTML ze stylami CSS.
<html>
<head>
<style>
table {border:solid;border-collapse:collapse;}
td {border:solid;padding:10px;}
td div {transform:rotate(270deg);height:100px;width:100px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<p>pionowy tekst </p>
</div>
</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
</tr>
<tr>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
</tr>
<tr>
<tr>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
</tr>
<tr>
<tr>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
<td>poziomy tekst</td>
</tr>
<tr>
</table>
</body>
</html>
W przeglądarce efekt powinien wyjść jak poniżej:
