I am facing an issue with keeping the headings fixed in a table while allowing the body to be scrolled using CSS. Specifically, I am struggling to right-align some of the columns because the headings are made up of divs with absolute positioning. Although I copied this code from a solution on the web that I now can't find, it mostly works well but I need help fixing the alignment of the headings.
.css:
.panel
{
overflow:auto;
overflow-x:hidden;
border: solid 1px #838383;
}
.fixedTableContainer {
height: 320px;
border: 1px solid darkgray;
background-color: white;
position: relative;
padding-top: 20px;
white-space: nowrap;
width: 100%;
}
.fixedTableContainerInner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
width: 100%;
line-height: 24px;
}
.fixedTableContainerInner th {
padding: 0 5px;
}
.thInner {
position: absolute;
top: 2px;
line-height: 24px;
text-align: left;
margin-left: -5px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
font: normal normal 10pt Verdana, Arial, Helvetica, sans-serif;
}<asp:Panel runat="server" id="Panel1" runat="server" CssClass="panel">
<asp:ListView runat="server" id="listView" runat="server" DataKeyNames="CompanyAccountID">
<LayoutTemplate>
<div class="fixedTableContainer">
<div class="fixedTableContainerInner">
<table style="width: 100%">
<tr>
<th><div class="thInner">Acct. ID</div></th>
<th><div class="thInner">Account Name</div></th>
<th><div class="thInner right">Account Code</div></th>
<th><div class="thInner">Sort Code</div></th>
<th><div class="thInner">Account Number</div></th>
</tr>
<tr id="itemPlaceHolder" runat="server"></tr>
</table>
</div>
</div>
</LayoutTemplate>
</asp:ListView>
</asp:Panel>My aim is to align any of those headings to the right within their container div, however, my attempts so far have been unsuccessful. Any assistance would be greatly appreciated.
NB: This has been edited for more detail as previous solutions did not work for me.
Thank you all.
PS. After extensive searching, I finally found the original post where I got the code from: fiddle