เป็นอีกตัวอย่างหนึ่งของการแสดงตารางด้วย div (tableless) ซึ่งในตัวอย่างนี้ แต่ละคอลัมน์มีความกว้างไม่เท่ากัน และสามารถมีข้อมูลได้หลายบรรทัดต่อ 1 เซล

  #table {
    width: 501px;
  }
  #table p {
    clear: both;
    float: left;
    margin: 0;
    border-bottom: 1px solid #e3e7e7; /* เส้นกรอบล่างของตาราง */
    background: #FFF url(https://www.goragod.com/ex/images/borders-2.gif) 0 0 repeat-y; /* พื้นหลังสำหรับเส้นกรอบในแนวตั้ง */
    border-left: 1px solid #e3e7e7; /* เส้นกรอบซ้ายของตาราง */
    border-right: 1px solid #e3e7e7; /* เส้นกรอบขวาของตาราง */
    width: 100%;
  }
 #table p.first-row {
    border-top: 4px solid #e3e7e7; /* เส้นกรอบบนของตาราง */
 }
 #table span {
    float: left;
    margin: 0 10px; /* ช่องว่างระหว่างเซล (แนวตั้ง, แนวนอน) */
  }
  #table span.col1 {
      width: 110px;
  }
  #table span.col2 {
      width: 150px;
  }
  #table span.col3 {
      width: 180px;
  }

เหมือนเดิมครับเส้นแนวตั้งของตารางเกิดจากรูปภาพพื้นหลัง แต่เนื่องจากในตัวอย่างนี้ ขนาดของแต่ละเซลไม่เท่ากันเราจึงไม่สามารถใช้รูปภาพพื้นหลังในแบบตัวอย่างก่อนได้

แนวคิดการออกแบบเส้นแนวตั้งก็คือการใช้รูปที่แสดงผลทีเดียวทั้งแถว ดังตัวอย่าง สังเกตุดูดีๆนะครับว่ารูปภาพที่ใช้จะมีขนาดกว้างแค่เพียง 2 เซล (300px * 10px) เนื่องจากในเซลสุดท้ายเราจะใช้เส้นคั่นที่ได้จาก CSS แทน (กรอบของ #table)
เส้นแรกจะอยู่ที่ 130px (ขนาดเซล 110px + margin ข้างละ 10px)
เส้นที่สองจะวาดที่ขอบด้านซ้ายสุดของรูปภาพเลยครับ (วาดแค่ 2 คอลัมน์เท่านั้น)
ขนาดของรูป 300px ได้จาก 110(ความกว้างของเซลแรก) + 150(ความกว้างของเซลที่ 2) + 40(margin รวมกันของทั้ง 2 เซล)

<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>