table-layout：固定的CSS無法在給定的列寬下正常工作

Question

這是我的表結構

<table id="recordingsTable" style="width:900px" class="tablesorter fixed_table">
</table>

CSS：

.fixed_table{
  table-layout: fixed;
}

從js填充表格：

str = ''
str += '<thead>'
str += '<tr>' +
    '<th style="width:150px;text-align:left !important;border-left:0;">Col 1</th>' +
    '<th style="width:150px;text-align:center !important">Col 2</th>' +
    '<th style="width:300px;text-align: center !important;">Col 3</th>' +
    '<th style="width:100px;text-align: center !important;">Col 4</th>' +
    '<th style="width:100px;text-align: center !important;">Col 5</th>' +
    '<th style="width:100px;text-align: center !important;">Col 6</th>' +
    '</tr>' +
    '</thead><tbody style="border-bottom: 1px solid #dddddd;">';


    for(i=0; i < recording_object.length; i++) {
        str += '<tr>';
        str += '<td style="text-align:left !important; padding-left:8px;border-left:0;">'
        str += recording_object[i].text
        str += '</td>' 
        str += '<td class="s3_file_path">' + recording_object[i].path + '</td>'
        str += '<td class="s3_file_name" style="font-size:11px;">' + recording_object[i].file_name + '</td>'
        str += '<td>' + recording_object[i].number + '</td>'
        str += '<td>';
        str += '<button id="' + recording_object[i].id + '" onclick="dup_dialog(this)" type="button" data-toggle="modal" ' +
            'data-target="#upload-all-modal" disabled="disabled" class="btn btn-primary btn-xs">Duplicate</button>' +
            '</td>'
        str += "<td>";
        str += '<button id="' + recording_object[i].id + '" class="btn btn-primary btn-xs" data-toggle="modal" ' +
            'disabled="disabled" data-target="#association">Association</button>'
        str += '</td></tr>'
    }
    str += '</tbody>'

但是它沒有顯示在js中定義的表列的寬度，並且當我更改任何列寬時，它在視圖中也沒有改變； 即使我通過檢查元素進行更改

似乎表格布局無法正常工作，因為它應該按給定的方式分配每個列的寬度。 有人可以幫忙嗎？

這是表格截圖：

Answer 1

我所看到的只是thead的問題。您忘了打開它。我放了一些隨機數據。我還刪除了單元格中的填充。寬度完全與您在javascript中指定的寬度相同。

https://jsfiddle.net/ks3mj4ec/4/