GORAGOD.com

ตารางด้วย div (tableless ตอนที่ 2)

ในตอนนี้ เราจะมาสร้างตารางจาก div แบบ tableless ในแบบที่แต่ละคอลัมน์อาจมีได้มากกว่า 1 บรรทัดกัน (โค้ดตารางในตอนก่อนๆ จะไม่สามารถแสดงผลในลักษณะนี้ได้ถูกต้อง)
<div id="table">
    <p class="first-row"><span class="col1">ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด</span><span class="col2">1,2</span><span class="col3">1,3</span></p>
    <p><span class="col1">2,1</span><span class="col2">2,2</span><span class="col3">ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด</span></p>
</div>

  #table {
      width: 390px;
  }
  #table p {
      clear: both;
      float: left;
      margin: 0;
      border-bottom: 1px solid #e3e7e7;
      background-image: url(borders.gif); /* รูปภาพเส้นกรอบในแนวตั้ง */
      background-color: #FFF; /* สีพื้นของตาราง */
      border-left: 1px solid #e3e7e7;
      width: 100%;
  }
  #table p.first-row {
      border-top: 4px solid #e3e7e7; /* เส้นกรอบด้านบน */
  }
  #table span {
      float: left;
      padding: 0 10px;
  }
  #table span.col1 {
      width: 110px;
  }
  #table span.col2 {
      width: 110px;
  }
  #table span.col3 {
      width: 110px;
  }

เคล็ดลับในการแสดงผลแบบนี้ อยู่ที่การใช้รูปภาพแสดงแทนเส้นกรอบในแนวตั้ง border.gif ที่ต้องวาดเพิ่อให้มีขนาดพอดีกับแต่ละเซล ตามตัวอย่างผมใช้รูปภาพ ขนาด 130px * 10px ที่วาดเส้นกรอบชิดขวามือในแนวตั้งดังรูป  ซึ่งขนาด 130px ได้มาจากขนาดของเซล 110px + padding ซ้าย 10px + padding ขวา 10px  

ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด1,21,3

2,12,2ทดสอบการตัดคำ และ แถวที่มีความสูงมากกว่า 1 บรรทัด