materialize 응답 설계의 데이터 테이블 고정 헤더 사용 안 함

Question

materialize 프레임 워크를 사용하여 고정 헤더 기능이있는 데이터 테이블을 사용하고 있습니다. 이것은 웹보기에 잘 작동하지만 mob와 tab view에 대해서는 고정 헤더 기능을 사용하지 않도록 설정할 필요가있는 디폴트 materialize datatable design을 사용하고 있습니다.

JS Fiddle

HTML 코드 :

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

JS 코드 :도하지만 작업 :

나는 " 진정한 반응 "을 사용했습니다. 이것을 달성 할 수있는 방법이 있습니까? 당신이 @media을 변경 어쩌면 경우

$(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 all and (max-width: 980px) { 
table.material-table thead tr th{ 
    width: auto !important; 
} 
table.material-table thead{ 
    min-width: 20% !important; 
} 
}