Question

我想创建一个具有相似列宽的数据表，我也希望它能够响应。我创造了同样的小提琴。 Working example here

对于列宽，我添加了以下css

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    white-space: normal!important;
}
table.table {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;         
  word-wrap:break-word;   
}

在js代码中也改变了

$('#example').DataTable({
  "scrollY": "300px",
  "scrollCollapse": true,
  "bAutoWidth": false,
  "aoColumns": [
       { "sWidth": "10%" }, 
       { "sWidth": "15%" }, 
       { "sWidth": "10%" },
       { "sWidth": "10%" }, 
       { "sWidth": "10%" }, 
       { "sWidth": "10%" },
       { "sWidth": "10%" }, 
       { "sWidth": "10%" }, 
       { "sWidth": "10%" } 
      ]
 });

更改后看起来如下 https://fiddle.jshell.net/qyjxd0gk/4/

如何使用响应式数据表将宽度设置为列？

Answer 1

更改css如下：

@media screen and (min-width : your_target_screen_size px)
{
  table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    ...  
  }
}

并将元标记添加到html head

<meta name="viewport" content="width=device-width" />

在bootstrap数据表中设置与列类似的宽度

1 个答案: