I have a challenge with my table where I need to add a green progress bar in the form of a div element within a tr. The width of this progress bar should change dynamically from 0% to 100%, reflecting the current runtime of the video associated with that particular tr. However, in this instance, I have set it as a static value. Here is the code snippet:
$("#highlight").append('<div id="playingBar"></div>');
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("height", $("#highlight").height());table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#playingBar {
position: absolute;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
background-color: rgba(0,255,0,0.4);
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="highlight">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>This implementation works well, however, there is an issue with the width of the div element being consistently wider than the corresponding tr. Can anyone provide some guidance on how to address this? Thank you!