Struggling to position the rows in my table vertically for CSS animations. I'm having difficulty ensuring the correct width for the rows.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: solid 1px;
width: 100%;
}
tbody {
position: relative;
display: block;
height: 96px;
border: 1px dashed;
width: 100%;
left:0;
right:0;
}
tr.absrow {
position: absolute;
width: 100%;
left: 0;
right: 0;
border: dotted 1px;
}
td {
border: solid 1px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="absrow" style="top: 0px;">
<td>John</td>
<td>25</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6aca9aea886a3bea7abb6aaa3e8a5a9ab">[email protected]</a></td>
</tr>
<tr class="absrow" style="top: 32px;">
<td>Alice</td>
<td>23</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51303d383234113429303c213d347f323e3c">[email protected]</a></td>
</tr>
<tr class="absrow" style="top: 64px;">
<td>Bob</td>
<td>29</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0022071a030f120e074c010d0f">[email protected]</a></td>
</tr>
</tbody>
</table>
</body>
</html>
The issue: while the vertical positions seem correct, the columns are not evenly sized and the rows don't span the table's full width.
What are my options? Do I need to manually set column widths or can I rely on automatic sizing by the browser like a regular table? How can I make the rows span the full width?
EDIT:
I tried using a list styled as a table, but it was not helpful. The user couldn't track the moving rows easily, resulting in jittery and lagging animations. Instead, I decided to implement a table sorting feature when the user clicks a button.