I'm trying to create a sticky table header, but the problem is, I can't get the widths of the columns to match the widths of the columns in the base table.
The problem seems to be that regardless of the widths I set (or not set) for the individual columns in the table, the actual widths of the columns sometimes differ greatly based on the content within the table.
I've tried a number of solutions, with the most successful thus far being copying the entire table (tbody included) to within a fixed-position div, and then setting the visibility of the tbody part of the table in the fixed-position div to hidden.
By doing so, the column widths are the same, but the problem then is that the tbody of the sticky table, while not visible, covers up the main table, thus making it impossible to register hover states, etc. on the main table.
Does anyone have any advice on how to properly do a sticky table header that will have the proper column widths in all cases? Thank you.
Edit: Here's an example of my markup:
<div class="sticky">
</div>
<table>
<thead>
<!-- Headers here. -->
</thead>
<tbody>
<!-- Tons of sensitive data here, so can't display. -->
</tbody>
</table>
I apologize for the vagueness, but I can't display the actual data, as it's sensitive in nature. The point is, the data is quite varied, and no matter what I do, I can never get the column widths to be fixed/consistent; they constantly differ.
Currently, upon page render, I copy the entire table to within the sticky div, and then set the visibility of the tbody element to hidden. This gives the proper widths, but causes the main table to be covered. Z-indexing seems to be of no assistance in this case as well.
