使用 colgroup 和 col 實現響應式表格

Table 在項目使用中十分頻繁，特別是在后台管理系統中，table 無疑是數據展示的第一公民，在早些年的網頁中，table 也是網頁布局的第一選擇，然后使用好 table 並不容易，其它有很多子元素和屬性需要了解，在實際使用中，table 的自適應也十分重要，如果使用不當，就會導致數據展示混亂，影響用戶閱讀體驗，table 可以說是一把利刃，只要使用恰當，可以簡化 DOM 結構，減少很多樣式編寫，提升布局效率。

基礎知識

表格的結構

table(summary)
 caption
 colgroup(width span)
 col(width)
 thead
 tr > th(colspan rowspan)
 tbody
 tr > td(colspan rowspan)
 tbody
 tr > td(colspan rowspan)
 tfoot
 tr > td(colspan rowspan)

說明

• summary 用於對描述表格
• caption 用於顯示表格標題
• colgroup & col 用於控制列的樣式
• thead 和 tfoot 在一張表中都只能有一個，而 tbody 可以有多個
• tfoot 必須出現在 tbody 前面，這樣瀏覽器在接收主體數據之前，就能渲染表尾，有利於加快表格的顯示速度。這一點對大型表格尤其重要
• thead、tbody 和 tfoot 里面都必須使用 tr 標簽

單元格合並

單元格豎向合並 rowspan
單元格橫向合並 colspan

常用於特殊的表格數據展示，如訂單列表、表單詳情展示等

列的樣式

colgroup & col

定義

<colgroup> 定義表格列的組。通過此標簽，您可以對列進行組合，以便格式化。該元素只有在 <table> 中才是合法的。

• 為表格列添加列的樣式，並不能創建列
• 對表格中的列進行組合，以便對其進行格式化
• 唯一屬性 span: 規定列組應該橫跨的列數
• 只能在 <table> 元素之內，在任何一個 <caption> 元素之后，在任何一個 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用

colgroup 與 col的區別及關系

• <colgroup> 用於設置表格中 多列 的樣式，閉合標簽
• <col> 用於設置表格中 單列 的樣式，單標簽
• <colgroup> 元素只能包含 <col> 元素
• <colgroup> 元素無法創建表格列，只用於控制列的樣式

實現列的斑馬紋

<table>
 <col class="col1"></col>
 <col class="col1"></col>
 <col class="col1"></col>
 <col class="col1"></col>
 <col class="col1"></col>
 <thead></thead>
 <tbody></tbody>
</table>

.col1:nth-child(2n) {
 background: #F8F8F9;
}
.col1:nth-child(2n+1){
 background: #E5ECFB;
}

給多列分組

<table class="table">
 <col>
 <col>
 <colgroup class="group1" span="2"></colgroup>
 <col>
 <colgroup class="group1" span="3"></colgroup>
 <col>
 <colgroup class="group1" span="1"></colgroup>
 <thead></thead>
 <tbody></tbody>
</table>

列的樣式控制

給 col 添加樣式 width、background、border
設置 color、font-size、text-align、min-width、max-width等無效

使用百分比控制列的寬度

<table>
 <col class="col3" width="10%">
 <col class="col3" width="30%">
 <col class="col3" width="20%">
 <col class="col3" width="10%">
 <col class="col3" width="20%">
 <col class="col3" width="10%">
 <thead></thead>
 <tbody></tbody>
</table>

使用固定寬度及自適應寬度

<table>
 <col class="col3" width="100">
 <col class="col3" width="300">
 <col class="col3">
 <col class="col3" width="100">
 <col class="col3">
 <col class="col3" width="100">
 <thead></thead>
 <tbody></tbody>
</table>

使用 col 及 colgroup 定義列的寬度自適應是最靈活的方式，但是對於瀏覽器來說，自適應的列會導致渲染的復雜度上升，降低渲染效率，所以css提供了一種渲染效率更高的樣式屬性 table-layout:fixed

table-layout

為表設置表格布局算法

table {
 table-layout: fixed;
}

屬性	描述
auto	默認 列寬度由單元格內容設定
fixed	列寬由表格寬度和列寬度設定
inherit	規定應該從父元素繼承 table-layout 屬性的值

auto

大多數瀏覽器采用自動表格布局算法對表格布局。
表格及單元格的寬度取決於其包含的內容。
此算法有時會較慢，這是由於它需要在確定最終的布局之前訪問表格中所有的內容。
微軟公司聲稱使用這個命令，表格的顯示速度可以加快100倍。

為了加快表格顯示，最好事先就在CSS（或者table標簽的width和height屬性）中指定表格的寬度和高度。)

fixed

表格和列的寬度通過表格的寬度來設置，某一列的寬度僅由該列首行的單元格決定。在當前列中，該單元格所在行之后的行並不會影響整個列寬。

使用 fixed 布局方式時，整個表格可以在其首行被下載后就被解析和渲染。這樣對於 automatic 自動布局方式來說可以加速渲染，但是其后的單元格內容並不會自適應當前列寬

任何一個包含溢出內容的單元格可以使用 overflow 屬性控制是否允許內容溢出 或者 使用 word-break:break-all 使內容換行

fixed + break-all

fixed布局帶來的問題是單元格內容較長，英文或數字中間沒有空格，是一連串的數字編碼或字符時，不會換行，會溢出，所以加上 word-break: break-all 強制其換行顯示

<table style="table-layout:fixed; word-break: break-all;"></table>

fixed + 不換行…顯示

fixed + break-all 解決了字符換行的問題，但是如果內容過長，容易撐高行的高度，導致表格某幾行或所有行的高度過高，致表格變形，影響閱讀體驗，所以可以讓過長的內容以 ... 顯示

<table style="table-layout:fixed;"></table>

為內容過長的 td 添加樣式 .ell

.ell {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

fixed + 多行 … 顯示 【推薦】

如果單行…顯示，可以保證所有行的高度一致，但當內容較多時，只能顯示少量信息，也不利於閱讀體驗， 這樣就需要單元格內容顯示多行，超過規定行數再以 ... 顯示

<table style="table-layout:fixed;"></table>

為單元格內容添加 mult-ell-3 的樣式，當內容多行三行時顯示 ..., 並設置title屬性，鼠標懸停時顯示全部內容，這樣即兼顧了表格整體美觀度也滿足了用戶的閱讀體檢

.mult-ell-3 {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

 

轉自：http://coderlt.coding.me/2017/11/20/table-colgroup/