How do I make a size-responsible table

Tags: #<Tag:0x00007efc61caf6e8>
#1

1
1.png1335×1400 57.2 KB
2
2.png2598×1400 463 KB
3
3.jpg1581×1400 305 KB

I gave my table option "stretchH : ‘all’ ".
and the wrapper has ‘overflow:hidden’.
now the table stretchs when the window size grow up
but when the window size shorten It never shorten again
how can I make the table full responsible.

my code :

let opt = {
    data: data || false,
    colHeaders: colheader || false,
    rowHeaders: rowheader || false,
    rowHeights: 26,
    colWidths: 5,
    stretchH: 'all',
    renderAllRows: true,
    readOnly: readOnly || false
}
table = new Handsontable(wrapper, option ? Object.assign(opt, option) : opt);
#2

Can you share the CSS settings of the parent container? When we load the Handsontable settings here https://jsfiddle.net/qmrLgewn/ it expands and shrinks with window (tested on Chrome 103 / macOS)

#3

this is the CSS settings of the container that is ‘div’

.tableWrapper {
    --border: 1px solid #EDEEF0;
    height: 150px;
    font-size: 1.2rem;
    width: 100%;
    overflow: hidden;
}
#4

Here’s an updated demo https://jsfiddle.net/6avfr8qk/1/ and it does not change the end result. Maybe it is related to other/higher elements in the DOM.

#5