datatables定義列寬自適應方法

不同的分辨率以及瀏覽器自適應，列表不出現滾動條，表格內容自動換行。

方法：通過定義表格列屬性，結合<table>CSS樣式和定義的列單元格樣式  'td_huanhang'/'td_unhuanhang

'

"columnDefs": [
    {targets: 9, orderable: false, width: "10%"},

]

columns: [

{"data": "addr", "name": "ADDR", 

className: "td_unhuanhang"

,

render: function (data, type, row, meta) {

    if(data!=null){

        //    return type === 'display' && data.length > 10 ?

        //    '<div title="'+data+'">'+data.substr( 0, 10 )+'...</div>' : data;

        return '

<div title="'+data+'">'+data+'</div>

';

    }

    else{

        return '';

    }

}

}

]

<table class="table table-striped table-bordered table-hover no-margin text-center" 

style="table-layout: fixed;"

>
</table>

這樣操作之后，table是寬度固定了，但是里面的文章如果很長，文字還是會跑出來

解決辦法：

  在 td 里面 加上 style="word-wrap:break-word;" 自動換行就好了，如果不想換行，可以將超出內容設為隱藏，並且用省略號代替

.td_huanhang{
    /*換行*/
    word-wrap:break-word;
}
.td_unhuanhang > div{
    /*不換行，省略號代替*/
    white-space:nowrap; //文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
    overflow: hidden;
    text-overflow: ellipsis; //...
}

來自為知筆記(Wiz)