Cách đặt độ rộng cột cho DataTables

Question

Tôi muốn đặt chiều rộng tĩnh cho tất cả các cột DataTables (với plugin cuộn).

Nó làm cho các cột rộng hơn nếu tôi đặt chiều rộng cho tất cả các thẻ <th> ngoại trừ một. Và nó không hoạt động nếu chiều rộng được đặt cho tất cả các thẻ. Ngoài ra, khi tôi kiểm tra qua các công cụ dành cho nhà phát triển, tôi không thấy bất kỳ phần tử <th> nào có chiều rộng 400px. Các phần tử có chiều rộng khác nhau: 115px, 132px, 145px ...

Tại sao lại như vậy? Làm thế nào tôi có thể thiết lập chiều rộng chính xác cho các cột?

CSS

.big-col { 
    width: 400px; 
} 

JS

var options = { 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
    "bScrollCollapse": true, 
    "colReorder": true 
}; 

$(document).ready(function() { 
    $('#example').dataTable(options); 
}); 

Full dụ: http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/

Ngoài ra, tôi đã thử các tùy chọn columnDefs, nhưng không thành công.

var options = { 
    "columnDefs": [ 
     { "width": "100px", "targets": "_all" } 
    ] 
}; 

Số cột chính xác không xác định. Bảng HTML được xây dựng động dựa trên dữ liệu từ phía máy chủ.

Answer 1

th.big-col{ 
width:400px !important; 
} 

table#example{ 
table-layout:fixed; 
} 

Các !important cho chiều rộng là cần thiết để thay thế mọi kiểu inline được áp dụng bởi datatables, và phong cách thể khác được áp dụng bởi jsfiddle hoặc bất cứ điều gì. table-layout:fixed; sẽ làm cho trình kết xuất bảng ưu tiên chiều rộng của các ô trong hàng đầu tiên để quyết định chiều rộng của tất cả các ô trong mỗi cột.

Fiddle có mọi thứ ở 410 thay vì 400, do đệm.

http://fiddle.jshell.net/o1hoabep/9/

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout