マテリアライズド・レスポンス・デザインのデータ・テーブル固定ヘッダーを無効にする

Question

マテリアライズド・フレームワークを使用して固定ヘッダー機能を持つデータ・テーブルを使用しています。これは、Webビューではうまくいきますが、mobとタブビューでは、固定ヘッダー機能を無効にする必要があるために、デフォルトマテリアライズデータテーブルを使用しています。

JS Fiddle

HTMLコード：

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

JSコード：

私が使用してみました "応答を：真" もなく、動作していません。これを達成する方法はありますか？

$(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

あなたが変更した場合はたぶん@mediaは、次のことに役立ちます。

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