CSS'de metni dikey yazdırma sorunu

Merhabalar. HTML kodlamayla oluşturduğum bir tablodaki bir hücrede bulunan metnin 90 derece dikey olmasını istiyorum. İnternette şu kodu buldum:

.rotate {

/* Safari */
-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);

}

Kod işe yarıyor metni döndürüyor ancak sorun şu ki metin olduğu yerde dönüyor.

Yani metin dışarı taşıyor, bulunduğu hücrenin yüksekliğini uzatmıyor. Bu sorunu nasıl aşabiliriz?

hocam metnın bulundugu dıv tam tersı rotate verınız heıght ozellıgınıde auto yapınız. denemediyseniz birde böyle deneyin

Hocam metin <th> ve </th> kodları arasında bulunuyor, div içinde değil.

Önce th class="rotate" kullandım, rotate koduna dediğiniz height: auto; kodunu verdim işe yaramadı.

Belki tablo hücresinde çalışmıyordur diye span class ardından da div class kullandım metin için, yine çalışmadı.

hocam uyguladıgın kodları html css olarak verır mısın bakayım bı

Buyur hocam:

<style type="text/css">
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>


<table border="1">
  <tr>
    <td rowspan="2" style="text-align:center;">Lorem ipsum</td>
    <th style="height:auto;" class="rotate">Dikey Yazılacak Metin</th>
    <th>asd</th>
    <th>qwer</th>
    <th>yuiop</th>
  </tr>
</table>

Hocam konu dışı olarak bir de bu tablo borderlarını nasıl tek hale getiriyorduk?

fikir edinmek açısından bir örnek bu hocam height:auto yemiyor o yuzden padding verdim

<style>
		.cevir {
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);    
	 padding:40px 10px; 
}

.tableborder, .tableborder td, .tableborder th{
    border-collapse:collapse;
    border:1px solid #000;
}
 
		   </style>

<table class="tableborder">
 <tr>
     <th>
         <div class="cevir">başlık buraya</div>
     </th>
     <th>
         <div class="cevir">başlık buraya</div>
     </th>
     <th>
         <div class="cevir">başlık buraya</div>
     </th>     
 </tr>
 <tr>
     <td>detaylar buraya</td>
     <td>detaylar buraya</td>
     <td>detaylar buraya</td>
 </tr>
 <tr>
     <td>detaylar buraya</td>
     <td>detaylar buraya</td>
     <td>detaylar buraya</td>
 </tr>
</table>