I'm not very experienced with CSS, so this issue may be simple. I have a table with a fixed header that I want to stay in place when scrolling. However, when I apply the 'position:fixed' CSS property, it becomes fixed but loses its spacing.
Before applying 'position:fixed': https://i.sstatic.net/s0tf5.jpg
After applying 'position:fixed': https://i.sstatic.net/N8eR3.jpg
.consumer-service-table-header-style {
background-color: #d3d3d3;
width: 100%;
position: fixed;
}
<thead class="consumer-service-table-header-style">
<tr>
<td align="left">
<label style="font-weight: bold;">Pull Date</label>
</td>
<td align="left">
<label style="font-weight: bold;">Rate</label>
</td>
<td align="left">
<label style="font-weight: bold;">Service SubCat</label>
</td>
<td align="left">
<label style="font-weight: bold;">ClientServiceIdMin</label>
</td>
<td align="left">
<label style="font-weight: bold;">ClientServiceIdMax</label>
</td>
<td align="left">
<label style="font-weight: bold;">Provider Name</label></td>
<td align="left">
<label style="font-weight: bold;">RatePullId</label>
</td>
<td align="left">
<label style="font-weight: bold;">DDS #</label>
</td>
</tr>
</thead>