I'm using liveweave to design an app. Right now everything is working fine on the console of this editor. However, when I downloaded the code and tried it in Google Chrome, I noticed that my table overflowed beyond the limit of the container. I tried to use the same code in codepen and jsfiddle and the results are the same as in Chrome. Is there any reason for the same code to work in some editors but fail in others? I'm using gridjs for the table. I'm forcing the height of the table to be 100% regarding the container.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link type="text/css" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script type="module">
import {
Grid,
html
} from "https://unpkg.com/gridjs?module";
</script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<div class="col-5">
<!--<div id="fixed-alert">-->
<div class="card h-100" id="card2">
<div class="card-body">
<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>
</div>
</div>
</div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
</body>
</html>
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"]
]
}).render(document.getElementById("table"));