Question

我试图修复我的数据表的第一列，我可以这样做，当我使用滚动时第一列是静态的，问题是标题看起来是透明的，所以当我向右滚动时我可以看到第一列下面的td元素的内容，虽然它对于表格的主体工作正常。

例如：酒店是第一列，Total Pasajeros是第二列，当我向右滚动时，我可以看到酒店下方的总Pasajeros，等等......

这是我用过的代码，我该怎么做才能修复它？

  <script type="text/javascript">
      $(function() {
        $('#hoteles').DataTable({
            scrollY: "450px",
            scrollX: true,
            paging: false,
            fixedColumns: {
                leftColumns: 1
            }
        });
      });
  </script>

Answer 1

如果没有看到你正在创建表格的JS，那么有点难以衡量。

有几件事情浮现在脑海中。您可以尝试致电：

var table = $('#hoteles').DataTable();    
table.columns.adjust().draw();

这将重新计算列布局。请参阅：https://datatables.net/reference/api/columns.adjust()

您可以看到的另一件事是为第一列提供更多空间。在表属性中，您可以使用以下类来定义列：

"columns": [
            { "title": "Hotel", "class": "nowrap", "width": "15%;"},
            { "title": "Total Pasajeros", "class": "center" },
            { "title": "Col3", "class": "nowrap", "width": "5%;" },
            { "title": "Col4" },
            { "title": "Col5", "class": "nowrap" }
        ]

请参阅：https://datatables.net/reference/option/columns

Answer 2

我有同样的问题，这是我做的解决方案，首先将.fixed-row添加到容器（而不是表），并使用bootstrap响应表：

function bs_tableAdapter(){
            var tableContainer = $('.fixed-row table');
            var calculateWidth = 0;
            tableContainer.each(function(e,n){
                var clone  = $(n).clone(true);
                var pos = $(n).position();
                var tmp = 0;
                clone.find('th').not(':eq(0)').remove();
                clone.find('tbody tr').each(function(){
                    $(this).find('td').not('.heads').remove();
                });
                clone.addClass('fixed-row-clone');
                $(n).find('tr').each(function(){
                    var elem = $(this).find('.heads').parents('.tab-pane').show().end();
                    calculateWidth = elem.outerWidth() + 10;
                    elem.parents('.tab-pane').css('display','');
                    if(tmp < calculateWidth){
                        tmp = calculateWidth;
                    }
                });

                clone.css({
                    left: pos.left,
                    top: pos.top,
                    width: tmp
                });

                clone.find('th,td').css({
                    'width': tmp+'px',
                    'padding-right' : '0px'
                });
                $('.fixed-row').append(clone);
            });
        }

具有固定列的DataTable看起来不太好

2 个答案: