## 前言 表格作為頁面展現中一部分不可獲取，尤其在后臺管理界面中，我們對之既愛又恨。那么它有哪些樣式需要控制呢,又有哪些你所不知道的。本文通過一個簡單的table實例來幫你解析實現一個table表格實例所需要的基礎知識。 ## 基本了解 1. 表格標題用caption標簽，標頭的用thead， 表格內容用tbody ，一個表格默認只有一個標題一個表格頭 一個表格內容，標題標簽的高度不算入table 的高度 ，表格的默認樣式需要修正初始化 2. 一般情況下針對數據表格建議使用table標簽，做好每個表格所需要的枚舉數據項總數（如每頁10條），做好分頁以及意外數據處理，當然也可以用div模擬表格布局。 3. td默認會根據內容擴充的，而且布局不是固定布局，為了統一美化處理，需要對每一個單元格做限制單行高寬，如果必須為多行文本且限制高度，內部再加div高度，td本身寫高度以及行高是無法限制的，如果不需要處理的采用自動拓展高度即可 4. 針對數據項的寬度可以采用百分比或者固定數值布局，需要根據不同數據項的需求采用合適的寬高以及樣式，例如身份證號、日期等要給合適的寬度，而標題長字段的要給較大的寬度值等 5. 設置寬度只需要在數據項的名稱設置一次即可，后面的表格內容布局會自動參考上面的比例 6. colspan為合并列，rowspan為合并行，在布局明顯為表格而且有合并單元格時，建議用table實現，簡約大方 ## 代碼實踐 * html代碼部分 ```` <table class="tableDemo" > <caption >我是表格的標題</caption> <thead> <tr><th class="no">編號</th> <th class="name">姓名</th> <th class="idno">身份證號</th> <th class="desc">描述</th></tr> </thead> <tbody> <tr><td>001</td><td>李四趙武</td><td>131102199010242011</td><td>13110219901024201的v的的v的的v的的v的1</td></tr> <tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr> <tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr> <tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr> <tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr> </tbody> </table> ``` * css代碼部分 ``` *{ margin: 0; padding: 0; } .tableDemo { width: 800px; /*實際高度286px，如果不清楚實際高度可以不寫*/ /*height:251px;*/ border: 1px solid grey; /*采用固定數據項的寬度決定布局*/ table-layout: fixed; /*控制表格外間距*/ border-spacing: 0; /* 設置合并邊框*/ border-collapse: collapse; } /*表格標題欄的樣式*/ .tableDemo caption { height: 40px; line-height: 40px; font-size: 30px; } /*每一行的數據項*/ .tableDemo tr { height: 40px; line-height: 40px; } .tableDemo tr th, .tableDemo tr td { border: 1px solid grey; } /*table中的表格不能做多行超出隱藏 只能通過內部div的設置超出隱藏，這里直接設置內容為單行超出隱藏*/ .tableDemo tr td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tableDemo th { line-height: 40px; height: 40px; } /*針對各個數據項給不同的寬度*/ .tableDemo .no { width: 100px; } .tableDemo .name { width: 150px; } .tableDemo .idno { width: 250px; } ``` * 效果圖如下