การจัดข้อความ text direction rotation หมุนข้อความ แนวตั้ง ด้วย css ในตาราง

ใช้ css ในการกำหนดทิสทางของข้อความ ในตาราง รองรับ IE6 - IE8, Chrome , Firefox, Safari

รายละเอียด เพิ่มเติม
http://msdn.microsoft.com/en-us/library/ms535153.aspx
http://snook.ca/archives/html_and_css/css-text-rotation

การใช้งานจริง ต้องปรับแต่ง เพิ่มนิดหน่อย เพื่อให้การแสดงผลใน บราวเซอร์ที่แตกต่างกัน มีความใกล้เคียงกันทีสุด

ตัวอย่างผลลัพธ์

CSS Code ตัวอย่าง

<style type="text/css">
body{
	font-size:12px;	
}
.textAlignVer{
	display:block;
	writing-mode: tb-rl;
	filter: flipv fliph;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	transform: rotate(-90deg); 
	position:relative;
	width:20px;
	white-space:nowrap;
	font-size:12px;
	margin-bottom:10px;
}
</style>

HTML Code ตัวอย่าง

<table width="200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="120" align="center" valign="bottom">&nbsp;</td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 1</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 2</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 3</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 4</span></td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 1</td>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
    <td align="center">4</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 2</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 3</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 4</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
</table>