最近看到一個有趣的需求(需支援ie11)
希望能在datatable套件下，可以做到表頭(thead)跨欄
以及表身(tbody)可以有多列一行的展示(如下圖)

那先來看表頭的部份，基本上這邊不難
只要把thead做好後，在columnDefs對好欄位的數量即可
但注意要加好寬度(個人非常建議)
這樣datatable套件就會自動幫你排好好的
但如果開了scrollX, autoWith之後，又是另一個故事了

拉回來，表頭解決完之後
雖然datatable套件有提供多列或欄位折疊的機制
但對於user操作來說較不直觀所以希望比照傳統方式做跨列(rowspan)
所以思路是這樣：先用ul&li做出列的資料，調整css樣式，然後再來同步每個ul下的高度(如上圖的第二項)

首先，用ul&li做出列的資料
這邊就直接在datatable的render做字串組合就不多述
但記得給後面會用到的className: colMultiLine

再來，調整css樣式部份，其中為了ie，把first-child獨立出來處理

    .colMultiLine {
        padding: 10px 0px 0px 0px !important;
        vertical-align: top !important;
    }
    .colMultiLine ul {
        margin: 0px;
        padding: 0px;
    }
    .colMultiLine ul li{
        border-bottom: 1px solid #e5e5ca;
        min-height: 25px;
        line-height: 20px;
    }
    .colMultiLine ul li:first-child {
        border-top: 0px !important;
    }

到這邊，多列的基礎已經達成，剩下li的高度不一的問題

所以jQuery這時就上場，下例選的是用datatable的initComplete事件綁定
但還是要依個自需求決定用那個事件

    initComplete: function () {
        $('.datatable tbody tr').each(function () {
            var cnt = $(this).find('td ul:eq(0) li').length;
            if (cnt > 0) {
                for (var i = 1; i <= cnt; i++) {
                    var maxHeight = Math.max.apply(null, $(this).find('td ul li:nth-child(' + i + ')').map(function () {
                        return $(this).height();
                    }).get());
                    $(this).find('td ul li:nth-child(' + i + ')').height(maxHeight);
                }
            }
        });
    }

最後到這，大致的需求已經成形
剩下一些細節優化的環節
比如 li裡有padding或margin的話，計算時要列入考慮
比如 資料列數過多(通常是未分頁狀況下)時，會有效能上的考量
比如 瀏覽器resize時的相對處理做法

以上做個筆記