禁用數據表固定標題以實現響應式設計

Question

我正在使用具有固定標題功能的數據表，使用 materialize 框架。 這對於 web 視圖工作正常，但對於 mob 和 tab 視圖，我使用默認的物化數據表設計，因為我需要禁用固定標題功能。

JS小提琴

HTML代碼：

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

JS代碼：

我也試過使用“ responsive: true ”，但沒有用。 有沒有辦法實現這一目標？

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

Answer 2

 $('#myTable').DataTable({ "fixedHeader": { "header": false, "footer": false } });