"resizable: true" doesn't work in Browser (but works in html editors)

[Pedro-Leitek]

I'm trying to create a table using gridjs. Everything works fine in liveweave when I resize the window, but when I download the draft and open it on chrome, the table columns don't resize responsively. It looks like the columns are fixed in size.

Here is the code:

`

                            <table id="alert_table" class="table">
                                <tbody id="alert_body">
                                    <tr>
                                        <td>
                                            <div class="ratio" style="--bs-aspect-ratio: 40%;">
                                                <div id="table"></div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

`

`
new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
sort: true,
pagination: false,
fixedHeader: true,
resizable: true,
width: "100%",
height: "100%",
//width: document.getElementById("table").clientWidth,
data: [
["John", "[email protected]", "(353) 01 222 3333"],
["Mark", "[email protected]", "(01) 22 888 4444"],
["Eoin", "[email protected]", "0097 22 654 00033"],
["Sarah", "[email protected]", "+322 876 1233"],
["Afshin", "[email protected]", "(353) 22 87 8356"],
["Afshin", "[email protected]", "(353) 22 87 8356"],
["Afshin", "[email protected]", "(353) 22 87 8356"],
["Afshin", "[email protected]", "(353) 22 87 8356"]
],
style: {
table: {
height: "100%"
},
th: {
'text-align': 'center',
'font-size': '1vw'
},
td: {
'text-align': 'center',
'padding': 0,
'font-size': '1vw'

}
}

}).render(document.getElementById("table"));

var grid=document.getElementsByClassName("gridjs gridjs-container");
grid[0].setAttribute("style", "width:100%; height:100%;");
`