CODEWITHSUNDEEP
cssscrollheadersticky
paul724
paul724

Reputation: 144

Using CSS to make header sticky and scroll body

I have tried several versions of this and I always come back to either the header expanding in size as I scroll or the th and td cells not being the same width. Please see this fiddle for full html and css: It scrolls beautifully but you will see that that th and td are progressively out of line with each other. https://jsfiddle.net/paul724/0gL74yd1/4/#&togetherjs=udj4PqtUOg

<table>
    <thead>
    <tr>
        <th class="th-right" >Fruit</th>
        <th class="td-left" >Colour</th>
        <th class="td-left" >Status</th>
        <th class="th-right" >Number
        <span class="up" text-align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; back to top &uarr;<span>
        </th>
    </tr>

Upvotes: 0

Views: 863

Answers (1)

927tanmay
927tanmay

Reputation: 136

You have given width of the td and th in percentage. If width is mentioned in percentage then the "td" or "th" column adjusts its size according to the percentage size of the word written inside. "Percentage" is used to define the width of the containing block.
So in the line no. "33" of your given at fiddle change width in pixels as desired. Try using below correction. It fixes the inconsistency. 

tbody td, thead th {
    width: 150px;
    float: left;
}

For making header and footer sticky. You need to add the following css. For footer you have to just fix bottom as 0.

 .th{
     position: sticky;
     top:0;
    }
.footer th{
   position: sticky;
   bottom:0;
   }

To make the whole table the same width as the 4 columns of content:

This problem occurs because you have used block level elements by setting display:block. Due to 100% width gets fixed but in code 100px width is also fixed and float:left is done due to which if content inside the block exceeds 100px it goes on to the next block.

Solution: Just remove display:block and float:left and do not fix the width as 100px.

Upvotes: 1

Related Questions