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

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