jquery - 如何阻止数据表列响应？

Question

我正在使用this template来自 Creative-Tim.com。

以下是该文件的链接:drive.google.com/open?id=1EPLpOmM9bNj2-HH-v9rF6HvSoNtTqJtQ

文件是:BS3/examples/new_table.html。

我正在使用数据表，当浏览器窗口宽度减小时，列标题会变得响应，其中最长的表标题名称出现在排序箭头的顶部，这导致它们看起来交错和弯曲，但并非所有列标题都是如此这是因为 header 名称的长度不同。我怎样才能保持它们全部静态？我目前将表格设置为 responsive = false，并有一个scrollX 栏。

 var table = $('#datatables').DataTable({
     "scrollX": true,
     orderCellsTop: true,
     fixedHeader: true,
     "pageLength": 10,
     responsive: false,
     sDom: 'lrtip'
 });

我只是希望列之间有适当的空间，并让它们保持这种状态，并在页面缩小时使用滚动。

Answer 1

如果我正确理解了你的问题，那么添加以下 CSS 就能解决你的问题:

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    display: block;
    bottom: 8px;
    right: 8px;
    font-family: 'FontAwesome';
    opacity: 0.8;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled  {
    padding-right: 30px !important;
}

table.dataTable thead .sorting.text-right,
table.dataTable thead .sorting_asc.text-right,
table.dataTable thead .sorting_desc.text-right,
table.dataTable thead .sorting_asc_disabled.text-right,
table.dataTable thead .sorting_desc_disabled.text-right  {
    padding-right: 0 !important;
}

结果: