PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ใช้ คุณสมบัติ css stylesheet สร้างตาราง

06 April 2010 By


ใช้ คุณสมบัติ css stylesheet สร้างตาราง ใช้ได้กับ IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ

CSS Code ตัวอย่าง

<style type="text/css">
.iTable{
	display:table; /* กำหนดให้แสดงเหมือนแท็ก table */
	width:500px;
	margin:auto;
	border:1px solid #333;
	border-collapse:collapse;
}
.iCaption{
	display:table-caption; /* กำหนดให้แสดงเหมือนแท็ก caption */
	caption-side:top;
	text-align:center;
}
.iRow{
	display:table-row; /* กำหนดให้แสดงเหมือนแท็ก tr */
}
.iTd{
	display:table-cell; /* กำหนดให้แสดงเหมือนแท็ก td หรือ th */
	border:1px solid #333;
	text-align:center;
}
</style>

 

HTML Code ตัวอย่าง

<div class="iTable">
<span class="iCaption">Table Description</span>
<ul class="iRow">
<li class="iTd">data 1</li>
<li class="iTd">data 2</li>
<li class="iTd">data 3</li>
</ul>
<ul class="iRow">
<li class="iTd">data 4</li>
<li class="iTd">data 5</li>
<li class="iTd">data 6</li>
</ul>
<ul class="iRow">
<li class="iTd">data 7</li>
<li class="iTd">data 8</li>
<li class="iTd">data 9</li>
</ul>
</div>

 ตัวอย่าง (IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ หากเป็นเวอร์ชันไม่สนับสนุน จะแสดงตัวอย่างด้านล่างเพี้ยน)

Table Description
  • data 1
  • data 2
  • data 3
  • data 4
  • data 5
  • data 6
  • data 7
  • data 8
  • data 9

เวอร์ชั่นอื่นสามารถศึกษาจากหัวข้อนี้ข้างล่างนี้แทน

http://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.html


Tags:: ตาราง css





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