极客观点
项目管理
HarmonyOS
贴上demo代码，方便大佬们调试:
<!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; i++) {
result += '<tr>';
for (let j = 0; j < tdLength; j++) {
result += `<td>${randomLengthString()}</td>`
}
result += '</tr>'
}
return result;
}
function getTheadStr() {
let result = '<tr>';
for (let j = 0; j < tdLength; j++) {
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>需求是：
1、td、th的宽度，为td、th中宽度较长的，比如：
2、希望tbody能实现类似overflow-y:auto的效果。
这样不行么？