如何在桌面端适配并居中DataTables表格且保持表头数据对齐

To fix the desktop layout issues and maintain header-body alignment without breaking mobile/tablet functionality, implement the following changes:

1. Update CSS with Media Queries #

Add these styles to handle responsive layout differences:

/* Default styles for mobile/tablet */
.table-container-byty {
  overflow-x: auto;
  width: 100%;
}

/* Desktop-specific styles (≥1025px) */
@media (min-width: 1025px) {
  .table-container-byty {
    max-width: 1300px;
    margin: 0 auto; /* Center container */
    overflow-x: visible; /* Disable horizontal scroll */
  }

  .custom-byty-table {
    width: 100% !important; /* Ensure table fits container */
    table-layout: auto; /* Columns adjust to content */
  }

  /* Align fixed header with centered table */
  .fixedHeader-floating {
    max-width: 1300px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

This ensures:

• Desktop: Container is centered with max-width 1300px, no horizontal scroll, columns auto-size to content.
• Mobile/tablet: Horizontal scroll remains active.

2. Conditional DataTables Initialization #

Modify your JS to enable/disable settings based on screen size:

jQuery(document).ready(function () {
  const menuBarHeight = jQuery('#menu-bar-rlp').outerHeight();
  const isDesktop = window.innerWidth > 1024;
  const headerOffset = isDesktop ? menuBarHeight + 30 : menuBarHeight;

  const dtConfig = {
    responsive: false,
    paging: false,
    searching: false,
    ordering: true,
    info: true,
    fixedHeader: {
      header: true,
      headerOffset: headerOffset
    },
    dom: 'frtiS',
    deferRender: true
  };

  // Desktop-only config
  if (isDesktop) {
    dtConfig.autoWidth = true; // Auto-adjust column widths to content
    dtConfig.sScrollX = false; // Disable horizontal scroll
    dtConfig.sScrollXInner = false;
    dtConfig.bScrollCollapse = false;
  } else {
    // Mobile/tablet config (keep original scroll behavior)
    dtConfig.autoWidth = false;
    dtConfig.sScrollX = '100%';
    dtConfig.sScrollXInner = '110%';
    dtConfig.bScrollCollapse = true;
  }

  jQuery('.custom-byty-table').DataTable(dtConfig);
});

Key Fixes: #

• Desktop: Disables scroll-related options and enables autoWidth so columns size to their longest content.
• Fixed Header Alignment: The CSS for .fixedHeader-floating ensures the cloned header matches the centered table's width and position, eliminating header-body misalignment.
• No Horizontal Scroll: Removing sScrollX on desktop prevents unnecessary scrolling while keeping it active for smaller screens.

3. Remove Inline Width Styles (Optional) #

For cleaner code, you can remove the inline style="width: 100%" from both the .table-container-byty div and the table, as the CSS now handles width responsively.

内容的提问来源于stack exchange，提问作者rogaloo