jquery - 最后一列标题文本使用数据表垂直对齐

Question

我有一个从 json 文件填充的数据表。我的问题是最后一列标题文本垂直顶部对齐(标题列的高度也变成两倍)。

有没有人有解决办法。

这是我的数据表代码。

$(document).ready(function() {
    var oTable = $('#genericTable').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "../jsonData/resources/json/" + key + ".json",
        "sPaginationType"   : "full_numbers",
        "bJQueryUI"         : true,
        "bRetrieve"         : true,
        "bPaginate"         : true,
        "bSort"             : true,
        "aaSorting"  : [[ 3, "desc" ]],
        "iDisplayLength"    : 50,
        "bAutoWidth"        : false,
        "aoColumns": [
                      { "sTitle": "Name" },
                      { "sTitle": "Description" },
                      { "sTitle": "Date" },
                      { "sTitle": "Action" }
                    ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            if(typeof aData[0] != 'string'){
                $('td:eq(0)', nRow).html( '<a href="' + aData[0]['link'] +'" style="color:blue">'  +
                        aData[0]['displayValue'] + '</a>');
            }
            $('td:eq(3)', nRow).html( '<a href="' + aData[3]['link'] +'" style="color:blue">'  +
                    aData[3]['displayValue'] + '</a>');
        }
    }).columnFilter({ sPlaceHolder: "head:after",
        aoColumns: [ { type: "text" },
                     { type: "text" },
                     null
                   ]
    });
});

提前致谢!

Answer 1

检查这个 Fiddle

"aoColumns": [ 
     { type: "text" },
     { type: "text" },
     { type: "text" },
     { "sClass": "top" }
]

CSS

.top {
    vertical-align: top;
 }