Day: July 3, 2017

  • Fixed Table Header Scrolling

    ในปัจจุบันในการพัฒนา website  เราจะเห็นว่า Table เกือบจะเป็นส่วนหนึ่งในการพัฒนาของแต่ละหน้า  ซึ่งส่วนใหญ่จะเป็นการแสดงผลของการค้นหาข้อมูลต่างๆของเมนูหรือหัวข้อในแต่ล่ะเรื่อง บ้างก็อาจจะมีข้อมูลน้อย บ้างก็อาจจะมีข้อมูลเยอะ ทำให้การแสดงผลมีความยาวล้นหน้าเพจ ถึงแม้ว่าปัจจุบันจะมีการนำ paging มาใช้แต่ในบางกรณีอาจจะมีความจำเป็นที่ต้องการตรวจสอบข้อมูลในการค้นหาทั้งหมดในหน้าเดียวกัน  แต่ปัญหาที่ตามมาในการแสดงผลทั้งหมดในหน้าเดียวกันก็คือเมื่อเรา scroll ลงมาข้างล่างสุด Header ของตัวตารางจะไม่ Fixed ไว้ และเลื่อนหายไปข้างบน ทำให้ยากลำบากในการตรวจสอบข้อมูล เนื่องจากผู้ใช้งานอาจจะลืมว่าคอลัมภ์ที่กำลังตรวจสอบอยู่นั้นคือคอลัมภ์อะไร จึงต้อง scroll ขึ้นไปดู Header อีกครั้ง ทำให้มีความล่าช้าในการตรวจสอบข้อมูล วันนี้จึงนำวิธีการ Fixed Header ของตาราง โดยใช้ css มาเสนอเพื่อเป็นแนวทางในการพัฒนากับผู้อ่าน ดังนี้ค่ะ

     

    ตัวอย่างที่1 (CSS ในหน้า Html เดียวกัน))

    tbody {

    display:block;

    height:400px;

    overflow:auto;

    }

    thead, tbody tr {

    display:table;

    width:100%;

    table-layout:fixed;

    }

    thead {

    width: calc( 100% – 1em )

    }

    ตัวอย่างที่1(การเรียกใช้ CSS ในหน้า Html เดียวกัน)

    <table id=”tableSearch” class=”table table-responsive table-hover” style=”border-collapse:collapse;border:1px solid #C0C0C0;table-layout:auto;width:1500px;”>

    <thead>

    <tr class=”filters” style=”background-color:#C0C0C0″>

    <th align=”left”>Order</th>

    <th align=”left”>Name</th>

    </tr></thead>

    <tbody><tr>

    <td colspan=”14″ style=”text-align:center;color:#808080 “>Order</td>

    <td colspan=”14″ style=”text-align:center;color:#808080 “>Name</td>

    </tr></tbody>

    </table>

    ตัวอย่างที่2 (CSS)

    html, body{

    margin:0;

    padding:0;

    height:100%;

    }

    section {

    position: relative;

    border: 1px solid #000;

    padding-top: 37px;

    background: #500;

    }

    section.positioned {

    position: absolute;

    top:100px;

    left:100px;

    width:800px;

    box-shadow: 0 0 15px #333;

    }

    .container {

    overflow-y: auto;

    height: 200px;

    }

    table {

    border-spacing: 0;

    width:100%;

    }

    td + td {

    border-left:1px solid #eee;

    }

    td, th {

    border-bottom:1px solid #eee;

    background: #ddd;

    color: #000;

    padding: 10px 25px;

    }

    th {

    height: 0;

    line-height: 0;

    padding-top: 0;

    padding-bottom: 0;

    color: transparent;

    border: none;

    white-space: nowrap;

    }

    th div{

    position: absolute;

    background: transparent;

    color: #fff;

    padding: 9px 25px;

    top: 0;

    margin-left: -25px;

    line-height: normal;

    border-left: 1px solid #800;

    }

    th:first-child div{

    border: none;

    }

    ตัวอย่างที่2(การเรียกใช้ CSS)

    <section class=””>

    <div class=”container”>

    <table>

    <thead>

    <tr class=”header”>

    <th>

    Table attribute name

    <div>Table attribute name</div>

    </th>

    <th>

    Value

    <div>Value</div>

    </th>

    <th>

    Description

    <div>Description</div>

    </th>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>align</td>

    <td>left, center, right</td>

    <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>

    </tr>

    <tr>

    <td>bgcolor</td>

    <td>rgb(x,x,x), #xxxxxx, colorname</td>

    <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>

    </tr>

    <tr>

    <td>border</td>

    <td>1,””</td>

    <td>Specifies whether the table cells should have borders or not</td>

    </tr>

    <tr>

    <td>cellpadding</td>

    <td>pixels</td>

    <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>

    </tr>

    <tr>

    <td>cellspacing</td>

    <td>pixels</td>

    <td>Not supported in HTML5. Specifies the space between cells</td>

    </tr>

    <tr>

    <td>frame</td>

    <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>

    <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>

    </tr>

    <tr>

    <td>rules</td>

    <td>none, groups, rows, cols, all</td>

    <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>

    </tr>

    <tr>

    <td>summary</td>

    <td>text</td>

    <td>Not supported in HTML5. Specifies a summary of the content of a table</td>

    </tr>

    <tr>

    <td>width</td>

    <td>pixels, %</td>

    <td>Not supported in HTML5. Specifies the width of a table</td>

    </tr>

    </tbody>

    </table>

    </div>

    </section>

    ตัวอย่างที่3(การเรียกใช้ CSS)

    @header_background_color: #333;

    @header_text_color: #FDFDFD;

    @alternate_row_background_color: #DDD;

    @table_width: 750px;

    @table_body_height: 300px;

    @column_one_width: 200px;

    @column_two_width: 200px;

    @column_three_width: 350px;

    .fixed_headers {

    width: @table_width;

    table-layout: fixed;

    border-collapse: collapse;

    th { text-decoration: underline; }

    th, td {

    padding: 5px;

    text-align: left;

    }

    td:nth-child(1), th:nth-child(1) { min-width: @column_one_width; }

    td:nth-child(2), th:nth-child(2) { min-width: @column_two_width; }

    td:nth-child(3), th:nth-child(3) { width: @column_three_width; }

    thead {

    background-color: @header_background_color;

    color: @header_text_color;

    tr {

    display: block;

    position: relative;

    }

    }

    tbody {

    display: block;

    overflow: auto;

    width: 100%;

    height: @table_body_height;

    tr:nth-child(even) {

    background-color: @alternate_row_background_color;

    }}}

    .old_ie_wrapper {

    height: @table_body_height;

    width: @table_width;

    overflow-x: hidden;

    overflow-y: auto;

    tbody { height: auto; }

    }

    ตัวอย่างที่3(การเรียกใช้ CSS)

    <table class=”fixed_headers”>

    <thead>

    <tr>

    <th>Name</th>

    <th>Color</th>

    <th>Description</th>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>Apple</td>

    <td>Red</td>

    <td>These are red.</td>

    </tr>

    <tr>

    <td>Pear</td>

    <td>Green</td>

    <td>These are green.</td>

    </tr>

    <tr>

    <td>Grape</td>

    <td>Purple / Green</td>

    <td>These are purple and green.</td>

    </tr>

    <tr>

    <td>Orange</td>

    <td>Orange</td>

    <td>These are orange.</td>

    </tr>

    <tr>

    <td>Banana</td>

    <td>Yellow</td>

    <td>These are yellow.</td>

    </tr>

    <tr>

    <td>Kiwi</td>

    <td>Green</td>

    <td>These are green.</td>

    </tr>

    <tr>

    <td>Plum</td>

    <td>Purple</td>

    <td>These are Purple</td>

    </tr>

    <tr>

    <td>Watermelon</td>

    <td>Red</td>

    <td>These are red.</td>

    </tr>

    <tr>

    <td>Tomato</td>

    <td>Red</td>

    <td>These are red.</td>

    </tr>

    <tr>

    <td>Cherry</td>

    <td>Red</td>

    <td>These are red.</td>

    </tr>

    <tr>

    <td>Cantelope</td>

    <td>Orange</td>

    <td>These are orange inside.</td>

    </tr>

    <tr>

    <td>Honeydew</td>

    <td>Green</td>

    <td>These are green inside.</td>

    </tr>

    <tr>

    <td>Papaya</td>

    <td>Green</td>

    <td>These are green.</td>

    </tr>

    <tr>

    <td>Raspberry</td>

    <td>Red</td>

    <td>These are red.</td>

    </tr>

    <tr>

    <td>Blueberry</td>

    <td>Blue</td>

    <td>These are blue.</td>

    </tr>

    <tr>

    <td>Mango</td>

    <td>Orange</td>

    <td>These are orange.</td>

    </tr>

    <tr>

    <td>Passion Fruit</td>

    <td>Green</td>

    <td>These are green.</td>

    </tr>

    </tbody>

    </table>

    <!–[if lte IE 9]>

    </div>

    <!–<![endif]–>

    จากข้อความข้างต้นผู้เขียนได้นำตัวอย่างการ Fixed Header ของ Table โดยใช้ CSS มาให้เลือกใช้ 3 แบบ หวังว่าคงเป็นแนวทางสำหรับการนำไปใช้สำหรับการพัฒนาที่ต้องการแสดงข้อมูลจำนวนมากในหน้าเดียวกัน และต้องการ Freeze Header ของตารางเพื่อตรวจสอบความถูกต้องของข้อมูลนะคะ

    แหล่งอ้างอิง
    https://codepen.io/tjvantoll/pen/JEKIu