javascript - 禁用数据表固定标题以实现响应式设计

Question

我正在使用物化框架使用具有固定标题功能的数据表。这适用于 web 视图，但对于 mob 和选项卡视图，我使用默认的物化数据表设计，因为我需要禁用固定标题功能。

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

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

Answer 2

也许如果您更改 @media 可以帮助您：

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