Misalign table rows by importing Bootstrap 5 CSS

Tags: #<Tag:0x00007efc60a88e88> #<Tag:0x00007efc60a88d20>
#1

Hello,

I’m using bootstrap 5 with le latest version of handsontable.

but when i import bootstrap.min.css the header and the row is miss aligned.

Capture%20d%E2%80%99%C3%A9cran%20du%202024-05-07%2012-42-31
Capture d’écran du 2024-05-07 12-42-31.png2186×169 7.24 KB

import Handsontable from “handsontable”;
import ‘handsontable/dist/handsontable.full.min.css’;
export default function () {

const data = [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
];

const container = document.getElementById('example');
const hot = new Handsontable(container, {
    data: data,
    rowHeaders: true,
    colHeaders: true,
    stretchH: 'all',
    licenseKey: "non-commercial-and-evaluation",
});

}

#2

Hi @zchen

Thank you for contacting us. Please send a code demo in which the issue is replicable. Without it we can’t determine the issue.

#3