PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

11 May 2010 By 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 ด้านล่าง









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






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง