Désactiver l'en-tête fixe de la table de données pour la conception sensible matérialisée

Question

J'utilise une table de données avec une fonctionnalité d'en-tête fixe utilisant le framework materialize. Cela fonctionne très bien pour la vue Web, mais pour les affichages de groupes et d'onglets, j'utilise la conception datable matérialisée par défaut pour que je doive désactiver la fonctionnalité d'en-tête fixe.

JS Fiddle

Code HTML:

<div id="tblContainer" class="material-table z-depth-3 hoverable"> 
    <table id="myTable" class="responsive-table highlight"></table> 
</div> 

code JS:

J'essayé d'utiliser "réactif: true" aussi, mais ne fonctionne pas. Y'a-t-il une quelconque façon de réussir cela?

$(document).ready(function() { 

    var data2 = { 
    "results": [{ 
     "Name": "test1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     }, 
     { 
     "Name": "test 1", 
     "Age": "23", 
     "Amount": "234944", 
     "Profit": "722636", 
     "Loss": "6346326", 
     "Address": "My test Address" 
     } 
    ] 
    }; 


    $('#myTable').dataTable({ 
    data: data2.results, 
    "order": [], 
    "bSort": false, 
    "bInfo": false, 
    "paging": false, 
    "searching": false, 
    columns: [{ 
     data: 'Name', 
     title: "Name" 
     }, 
     { 
     data: 'Amount', 
     title: "Amount" 
     }, 
     { 
     data: 'Profit', 
     title: "Profit" 
     }, 
     { 
     data: 'Loss', 
     title: "Loss" 
     }, 
     { 
     data: 'Age', 
     title: "Age" 
     }, 
     { 
     data: 'Address', 
     title: "Address" 
     }, 
     { 
     data: 'Loss', 
     title: "Loss" 
     }, 
     { 
     data: 'Age', 
     title: "Age" 
     }, 
     { 
     data: 'Address', 
     title: "Address" 
     } 
    ], 
    "columnDefs": [{ 
     "width": "200px", 
     "targets": [0] 
     }, 
     { 
     "width": "100px", 
     "targets": [1] 
     }, 
     { 
     "width": "100px", 
     "targets": [2] 
     }, 
     { 
     "width": "100px", 
     "targets": [3, 6] 
     }, 
     { 
     "width": "100px", 
     "targets": [4, 7] 
     }, 
     { 
     "width": "200px", 
     "targets": [5, 8] 
     } 
    ], 
    "fixedHeader": { 
     header: true 
    }, 
    "responsive": true 
    }); 

}); 

Answer 1

Peut-être que si vous changez le @media vous aide:

@media all and (max-width: 980px) { 
table.material-table thead tr th{ 
    width: auto !important; 
} 
table.material-table thead{ 
    min-width: 20% !important; 
} 
}