paste the demo code to make it easy for bosses to debug:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=750, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table</title>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
th,
td {
white-space: nowrap;
padding: 10px;
}
</style>
<script>
$(function () {
let trLength = Math.ceil(100 * Math.random());
let tdLength = Math.ceil(20 * Math.random());
function randomLengthString() {
return "".repeat(Math.ceil(30 * Math.random()));
};
function getTbodyStr() {
let result = "";
for (let i = 0; i < trLength; iPP) {
result += "<tr>";
for (let j = 0; j < tdLength; jPP) {
result += `<td>${randomLengthString()}</td>`
}
result += "</tr>"
}
return result;
}
function getTheadStr() {
let result = "<tr>";
for (let j = 0; j < tdLength; jPP) {
result += `<th>${randomLengthString()}</th>`
}
result += "</tr>"
return result;
}
const Html =
`<table class="table" border>
<thead class="thead">
${getTheadStr()}
</thead>
<tbody class="tbody">
${getTbodyStr()}
</tbody>
</table>`
$("body").append(Html);
})
</script>
</head>
<body>
</body>
</html> the width of
1, td and th is longer than that of td and th, for example:
2tbodyoverflow-y:auto
