Horizontal scrollbar always appearing even when width does not require scrolling

Getting help Issues
,
1 
let data = [
  [
    "Sandeep",
    "Anil",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Sandeep",
    "Rodrigues",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "50",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Ganesh",
    "Yadav",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Ravi",
    "Lal",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Suraj",
    "Riona",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Sudeep",
    "Avil",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Sushma",
    "Ancita",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Karis",
    "Dsilva",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
  [
    "Viera",
    "Riona",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "Done",
    "80",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
    "Not Started",
  ],
];

this.container = this.hotContainer.nativeElement;

this.hotInstance = new Handsontable(this.container, {
  data: data,
  colWidths: [
    200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200,
    200, 200,
  ],
  hiddenColumns: {
    columns: [4, 5, 7, 8, 12, 13, 15, 16],
    indicators: false,
  },
  colHeaders: true,
  rowHeaders: false,
  mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 1 }],
  fixedRowsTop: 3,
  height: 400,
  readOnly: true, // 🔒 make all cells read-only!
  cells(row, col) {
    const cellProperties: Partial<Handsontable.CellProperties> = {};

    const cellValue = data?.[row]?.[col];

    if (col > 1) {
      if (cellValue === "Done" || cellValue === "100") {
        cellProperties.className = "done-cell";
      } else if (cellValue === "Not Started") {
        cellProperties.className = "wip-cell";
      } else {
        cellProperties.className = "partial-cell";
      }
    }
    return cellProperties;
  },
  nestedHeaders: [
    [
      { label: "Year", colspan: 2 },
      { label: "Jan → Feb", colspan: 3 },
      { label: "March", colspan: 3 },
      { label: "April", colspan: 2 },
      { label: "May → Jun", colspan: 3 },
      { label: "July", colspan: 3 },
    ],
    [
      { label: "Section", colspan: 2 },
      { label: "Plan", colspan: 3 },
      { label: "Target", colspan: 3 },
      { label: "Thinking", colspan: 2 },
      { label: "Dancing", colspan: 3 },
      { label: "Sleeping", colspan: 3 },
    ],
    [
      { label: "Task", colspan: 2 },
    "Design phase completed",               // 3 words
    "Quality assured",                      // 2 words
    "Performance testing passed",           // 3 words
    "Firmware settings configured settings configured",         // 3 words
    "Component sourcing completed settings configured",         // 4 words
    "Functional testing approved settings configured",          // 4 words
    "Thermal profile verified settings configured",             // 4 words
    "System tests validated settings configured settings configured",               // 7 words
    "Shipping plan finalized settings configured",              // 3 words
    "Packaging and branding designed settings configured",      // 4 words
    "Marketing launch assets approved settings configured settings configured",     // 5 words
    "Software tested and optimized",        // 5 words
    "Performance targets achieved settings configured settings configured",         // 5 words
    "All launch issues resolved settings configured settings configured"            // 5 words
    ],
  ],
  collapsibleColumns: [
    { row: -3, col: 2, collapsible: true },
    { row: -3, col: 5, collapsible: true },
    { row: -3, col: 8, collapsible: true },
    { row: -3, col: 10, collapsible: true },
    { row: -3, col: 13, collapsible: true },
  ],

  licenseKey: 'non-commercial-and-evaluation',
});

const collapsiblePlugin = this.hotInstance.getPlugin("collapsibleColumns");
collapsiblePlugin.collapseAll();
collapsiblePlugin.expandSection({ row: -3, col: 8 });
2

Hi @sandeep.anil.rodrigu

Here’s Aleksandra from the Support team.

I saw that you posted the same question tat support@handsontable.com and I replied there.

Please continue the conversation on email to avoid subject duplication.