2016-07-25 3 views
0

で正常に動作していない固定CSSは私のテーブル構造がテーブルレイアウト:ここで指定した列の幅

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

あるCSS:JSから

.fixed_table{ 
    table-layout: fixed; 
} 

移入テーブル:

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で定義されているようにテーブルの列の幅を示していない、と私は任意の列の幅を変更すると、ビューで変更されません。私が要素を検査することによってそれを変更しても、

それは与えられた通りに各列幅を割り当てるべきであるので、テーブルレイアウトが正しく動作しないようです。誰も助けることができますか?ここで

は、テーブルのスクリーンショットです: enter image description here

+0

あなたは、レンダリングされたHTMLください – Pete

+0

追加スクリーンショット –

答えて

0

私が見るすべては。あなたがit.Iはいくつかのランダムdata.Iはまたあなたcells.The幅にパディングを削除置く開くことを忘れtheadに問題がまったく同じですjavascriptで指定します。フィドルを確認してください。

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

+0

thead要素が、私はここでそれを逃し追加される投稿できます。私は自分の質問を更新します –

+0

幅は正確にfiddle.Col 3で指定した通りです。幅は300px、Col 5 100pxなどです。私のために問題を引き起こす他のCSSルールも必要です。 。 –

関連する問題