DataTables列寬：小值不能正常工作

我試圖將我的DataTables列的列寬設置爲一個小值（如10px）。DataTables列寬：小值不能正常工作

據the docs，我應該能夠使用：

$('#mytable').dataTable({ 
    "columnDefs": [ 
     { "width": "10px", "targets": 0 } 
    ] 
});

這似乎對於較大值的工作（如100px），但不適合較小的，我嘗試使用。

我的列標題和該列中的單元格只包含 ，所以這些不應該定義寬度。我從標題中刪除了排序的可能性，所以這也不會佔用空間（"orderable": false）。

的jsfiddle：https://jsfiddle.net/snoodaard/ak11heu4/

我也試着設置明確使用<th width="5px"> </th>寬度。

任何關於如何完成這一點的指針？

來源

2015-12-23 SaeX

你想達到什麼目的？如果沒有數據，您可以隱藏該列。列寬也受填充影響，您需要添加CSS規則來克服該問題。 –

@ Gyrocode.com：表中的數據由分組的不同用戶填充。我試圖添加一個列，其中單元格將獲得顯示特定顏色或背景圖像的某個CSS類。基本上這個窄列（只顯示顏色）將指示哪一組用戶添加了特定的內容/行。 – SaeX

SOLUTION

使用下面的代碼去除填充和內容的最後一列和顏色都細胞的某種顏色。

的JavaScript

$('#mytable').dataTable({ 
    "order": [], 
    "paging": false, 
    "dom": 'T<"clear">lfrtip', 
    "columnDefs": [{ 
     "className": "tag", 
     "orderable": false, 
     "width": "2px", 
     "targets": 2 
    }] 
});

CSS

table.dataTable thead tr th.tag, 
table.dataTable tbody tr td.tag { 
    padding:0; 
    text-indent:-9999px; 
} 

table.dataTable tbody tr td.tag, 
table.dataTable tbody tr td.tag { 
    background-color:red; 
}

您可以使用createdRow回調設置一類基於該行數據的行。然後，您將能夠根據該數據對每一行進行不同的着色。

DEMO

見updated jsFiddle代碼和演示。

來源

2015-12-23 19:39:17

DataTables列寬：小值不能正常工作

回答

相關問題