Encountering an issue with the alignment of elements when using position: absolute; across multiple browsers.
In Chrome, everything appears properly aligned within the table. Refer to the following link for a visual:
https://i.sstatic.net/qhrAi.jpg
However, in IE (11), there seems to be a discrepancy in the alignment of column tops. You can view the issue in the provided link:
https://i.sstatic.net/GgSpB.jpg
The first column is set as absolute positioning to remain fixed while scrolling horizontally. The horizontal scrolling function works well in both browsers, but the aesthetics are disrupted in IE.
Here is the CSS styling being used:
<style type="text/css">
.tg {
border-collapse:collapse;
border-spacing:0;
}
.tg td{
font-family:Arial, sans-serif;
font-size:14px;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg .tg-941l{
background-color:#ffc000;
text-align:center;
vertical-align:middle;
}
.tg .tg-huo5{
background-color:#ffc000;
vertical-align:middle;
}
.tg .tg-Sidebar{
background-color:#ffc000;
vertical-align:middle;
position: absolute;
}
.tg .tg-yw4l{
vertical-align:top;
}
</style>
Showcased below is the beginning of the table structure along with the first td:
<table class="tg" style="undefined;table-layout: fixed; width: 1290px">
<colgroup>
<col style="width: 100px">
<col style="width: 58px">
<col style="width: 181px">
<col style="width: 62px">
... (more col styles here)
</colgroup>
<tr>
... (table headers here)
<tr>
<td height="49" width="90" class="tg-Sidebar"><b> BC-700 </b></td>
... (table data here)
</tr>
Any insights or feedback on this issue would be highly appreciated.
Thank you in advance for your assistance!