禁用数据表固定标题以实现具体化响应式设计

Question

>我正在使用具有固定标题功能的数据表，使用物化框架。这对于 Web 视图工作正常，但对于暴民和选项卡视图，我正在使用默认的具体化数据表设计，我需要禁用固定标头功能。

JS小提琴

网页代码：

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

Answer 2

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