datatable scrollX水平不工作

我有以下表格，其中包含超過10列。我正在使用數據表來顯示數據。我使用水平滾動，因爲我有很多列。但滾動沒有顯示出來。請幫忙。這裏是我的截圖爲我的表datatable scrollX水平不工作

<table id="example" class="display nowrap" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 

    <th><center>Outlet ID</center></th> 
    <th><center>Outlet Name</center></th> 
    <th><center>Date</center></th> 
    <th><center>Day</center></th> 
    <th><center>Day Part</center></th> 
    <th><center>Service</center></th> 
    <th><center>Product</center></th> 
    <th><center>Staff</center></th> 
    <th><center>Pest</center></th> 
    <th><center>Others</center></th> 
    <th><center>Attentiveness</center></th> 
    <th><center>Accuracy</center></th> 
    <th><center>Speed</center></th> 
    <th><center>Friendliness</center></th> 
    <th><center>Food Handling & Hygiene</center></th> 
    <th><center>Attentiveness</center></th> 
    <th><center>Accuracy</center></th> 
    <th><center>Speed</center></th> 
    <th><center>Food</center></th> 
    <th><center>Manpower</center></th> 
    <th><center>Faulty Equipment</center></th> 
    <th><center>Staff Behavior</center></th> 
    <th><center>Restaurant Cleanliness</center></th> 
    <th colspan=3><center>Action</center></th> 
    </tr> 
    </thead> 
    <tbody> 


    #code continue... 

    </tbody> 
    </table>

這裏是我的CSS和腳本滾動

<style> 
div.dataTables_wrapper { 
    width: 800px; 
    margin: 0 auto; 
} 
</style> 


<script> 
$(document).ready(function() { 
$('#example').DataTable({ 
    "scrollY": 300, 
    "scrollX": true 
}); 
}); 
</script>

我需要顯示水平滾動，因爲我有超過10列。請幫忙。結果應該顯示like this

來源

2017-08-29 NHH

你可以創建一個小提琴或片段？ –

檢查了這一點

更改此：

</tbody> 
</tables>

對此

</tbody> 
</table>

fiddle

來源

2017-08-29 08:31:18

對不起，我想念我的「桌子」的拼寫。還是行不通。 – NHH

檢查小提琴 –

很好地完成karolos。如何實現/合併到我的HTML？我完全複製了js和css。仍然沒有顯示水平滾動 – NHH

datatable scrollX水平不工作

回答

相關問題