Hello friends welcome to coding 6. Today in this video I will be telling you that how
to make this sticky table header. So you can see on your screen. So this will be the table
that I will be building into HTML 5 and CSS 3. It has rows and columns and you can see
that female, number, name, gender, date of birth, country and you can see that these
are the rows and columns. And let's start the video and for this I am using visual studio
code text filter. You can use any code text filter of your choice. So let me just delete
all the HTML and also the CSS. So firstly you just delete the CSS. So now you will see
that these are the raw HTML that is there. So let me also delete the HTML so that we
start from scratch. So first of all let me just delete, change the title to sticky table
header in CSS 3. So in the body here first of all we have it is which has a class of
table row. So inside this class we have a table tag which has a cell padding of 10
And inside this we have CR tag which stands for table row. So inside that we have table
heading, senior number. So this is the first heading. The second one will be name. The
third one will be gender. The fourth one will be date of birth. The fifth one will
be country. So these are the five columns it will be having. Senior number, name, gender
date of birth, country. So after that we will be supplying the data. It is row. So
inside another table row we have the table data. So let me have number 1. Another entry
we have let's suppose the name is John. Let's place his name. The date of birth will be
15 of August 1990. And lastly he is from India. So you can see that this is the first set
of data in the table. So let me just copy it and paste it some more number of times
1, 2, 3, 4. So you can see that you can just paste it 18, 19 number of times. So that is
all. So I will not be changing the senior number. You can just change it by yourself
And this is all the HTML that is required. So just copy it. And after that we will be
including the standard CSS which will be the style sheet. So I will be importing the style
sheet, style of CSS. So first of all we will now be targeting the body. Removing the margin
padding. Display property I will change to flex. Justify content to center. Align items
to also center. Height I will give 100 vertical height. Phone family I will change to sans
serif. And the background color I will change to this hexadecimal color 007180. This is
the color. So now you can see that the background color has changed. Now I will target the table
of class. I will provide a thick width of 800 pixels. Height of 400 pixels. Overflow
Y will be scroll. Background will be white. So let me provide some box shadow effect also
010 pixels. 100 pixels. Followed by the color RGBA. 0, 0, 0, 0.5 for the opacity. So some
box shadow has also been added. So let me just show you in the full screen. So you can
see that a vertical scroll bar has also been added to see the hidden items. So this is
all that we have made here. So after that we will now be targeting the table tag. So
after that we will be giving the table effect of 100%. Now we will be targeting the table
heading and the table item tags. And first of all we will be giving a border of 1 pixel
solid. And again this color 005277. Border collapse will be collapsed. And text align
will be left. So you can see that it has aligned properly and it also gets a border. After
that I will be targeting the table heading again. Position I will give 80 here. Top to
0. And background I will change to this color 00BCD4. This is the color I will change. And
the text color I will change to white. So you can see that the table heading has been
styled properly. After that I will be targeting the table row. There is table heading sorry
Inside table row I will be targeting the first table heading here. I will give a width of
60 pixels. Text align will be center. The background color I will give here is that
03707D. This is the color. You can see that this first table heading has got a different
background color. Similarly I will target table heading and I will try it. 1. The background
color I will change here to this 00BCD4. Text align to center. And I will change the text
color to white. So that's it. We have successfully styled this. You can see that if I show you
in full screen. So this is the sticky table heading that we have made here. It is scroll
bar, vertical scroll bar and you can see that these are the items present in the table
And it has been perfectly styled also. So thanks very much for watching this video
If you like this video then please hit the like button. And also don't forget to subscribe
the channel. And I will be seeing you in next video. Until then thank you very much
www.xyzprinting.com