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

11 May 2010 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

ตาราง css แนวตั้ง ข้อความ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ตาราง 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

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

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

	จำนวนสินค้า 1	จำนวนสินค้า 2	จำนวนสินค้า 3	จำนวนสินค้า 4
ข้อมูลที่ 1	1	2	3	4
ข้อมูลที่ 2
ข้อมูลที่ 3
ข้อมูลที่ 4

CSS Code ตัวอย่าง

<style type="text/css">
body{
	font-size:12px;	
}
.textAlignVer{
	display:block;
	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>

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 12-11-2017

เพิ่มเติมตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style type="text/css">
  body{
      font-size:12px; 
  }
  .textAlignVer{
      display:block;
      filter: flipv fliph;
      -webkit-transform: rotate(-45deg); 
      -moz-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
      position:relative;
      width:25px;
      white-space:nowrap;
      font-size:12px;
      margin-bottom:10px;
      left:8px;
      text-align:center;
  }
  </style>  
</head>
<body>

 <table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="120" align="center" >&nbsp;</td>
    <td height="80" width="70" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 1</span></td>
    <td height="80" width="70" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 2</span></td>
    <td height="80" width="70" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 3</span></td>
    <td height="80" width="70" 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> 
  
</body>
</html>

ดูผลลัพธ์ที่ demo ด้านล่าง