<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mytable {
width: 80%;
position: relative;
}
#mytable tr::after {
content: '';
position: absolute;
left: 0;
/* bottom: 0; */
margin-top: calc(var(--row-height) - 2px);
height: 2px;
width: var(--process-value);
background-color: red;
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<table id="mytable" border="1" contenteditable="true" cellspacing="0">
<tr style="--row-height:20px;--process-value:90%">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
<script>
// resize-observer-polyfill
const ro=new ResizeObserver((entries,observer)=>{
// for (const entry of entries) {
// const {left,top,width,height}=entry.contentRect;
// }
const table=entries[0].target;
table.querySelectorAll('tr').forEach((row,index)=>{
row.style.setProperty('--row-height',`${row.offsetHeight}px`);
})
})
ro.observe(mytable)
</script>
</body>
</html>
浙公网安备 33010602011771号