A. not so short choice____B. must wrap here
C. another choice_______D. yet another choice
In another word, it should have the same effect as the addData() function in the page below (save as whatever.html and open it)
<html>
<head>
<style>
table { width: 100%; border: 1px solid black; }
#root { width: 10cm; }
</style>
</head>
<body>
<div id="root">
</div>
<script>
function make(tag, children) {
const node = document.createElement(tag);
for (const c of children) {
if (typeof c === "string") {
node.appendChild(document.createTextNode(c));
} else {
node.appendChild(c);
}
}
return node;
}
function addData(data) {
const root = document.getElementById("root");
let table = make("table", [make("tr", data.map(d => make("td", [d])))]);
root.appendChild(table);
if (table.scrollWidth <= root.offsetWidth) {
return;
}
root.removeChild(table);
table = make("table", [
make("tr", [make("td", [data[0]]), make("td", [data[1]])]),
make("tr", [make("td", [data[2]]), make("td", [data[3]])]),
]);
root.appendChild(table);
if (table.scrollWidth <= root.offsetWidth) {
return;
}
root.removeChild(table);
table = make("table", data.map(d => make("tr", [make("td", [d])])));
root.appendChild(table);
}
addData(["1".repeat(10), "2".repeat(10), "3".repeat(10), "4".repeat(10), ]);
addData(["1".repeat(20), "2".repeat(20), "3".repeat(20), "4".repeat(20), ]);
addData(["1".repeat(30), "2".repeat(30), "3".repeat(30), "4".repeat(30), ]);
</script>
</body>
</html>