固定的CSS标头位置消除了间距

Question

I'll start by saying, I'm not great with CSS, so this may be simple. I have a table with a header which I'd like to be fixed when scrolling. When I add position:fixed to the CSS, it is fixed when scrolling, but loses it's spacing format.

Before 'position:fixed' :

This is after 'position:fixed':

 .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> 

Answer 1

adding display: table; to your class should keep it all nicely spaced!

Answer 2

As far as I understand you're having a div around your table with a specified width. When you change position: fixed; to position fixed *important; and add display:table; to the class .consumer-service-table-header-style , you should get the desired result.