Pure CSS Sticky Table Header

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ต.ค. 2024
  • Please LIKE our Facebook page for daily updates...
    / online-tutorial-html-c...
    Music Credit
    Track: Tobu - Roots [NCS Release]
    Music provided by NoCopyrightSounds.
    • Tobu - Roots | House |...

ความคิดเห็น • 70

  • @azatahmedov4308
    @azatahmedov4308 4 ปีที่แล้ว +25

    Let's cut all the crap and navigate to exact solution: 6:35 "position: sticky" on th. No need to thank me!

  • @HardeepSingh-bx8io
    @HardeepSingh-bx8io 5 ปีที่แล้ว

    I am web developer. I have no much time to study designs. But by your video i learn a lot

  • @emiliocoronamunoz7846
    @emiliocoronamunoz7846 3 ปีที่แล้ว +1

    You was the only who could help me , thanks I like your work, it`s fantastic

  • @TipTooz
    @TipTooz 5 ปีที่แล้ว +1

    if i have two header in table then how i will make sticky, i also doesn't want to define height for first header.
    if you know then replay me
    First header
    second header

    • @haya-tb1wf
      @haya-tb1wf 5 ปีที่แล้ว

      Change the classes name

    • @TipTooz
      @TipTooz 5 ปีที่แล้ว

      @@haya-tb1wf but then both header will stick on top. And which class i need to change.

  • @quickcounter5115
    @quickcounter5115 5 ปีที่แล้ว +2

    wow its really amazing..

  • @HardeepSingh-bx8io
    @HardeepSingh-bx8io 5 ปีที่แล้ว

    Very nice before u r tutorial i always make two tables for. Thanks for video

    • @TipTooz
      @TipTooz 5 ปีที่แล้ว

      THIS will not work in ie browser also when you want to make two sticky header then u will mess up

  • @robertosalinas8263
    @robertosalinas8263 2 ปีที่แล้ว

    The only thing I don't like about this method is that the scroll bar touches the header, anything to make the scroll bar start where the information starts?

  • @dhavalbheda3005
    @dhavalbheda3005 4 ปีที่แล้ว

    Its really helpful

  • @lalahour8062
    @lalahour8062 5 ปีที่แล้ว

    happy new year!. i have some question. why type out side of table at 1:21?

  • @marcelodecastrooficial
    @marcelodecastrooficial 3 ปีที่แล้ว

    Great post!! But I am facing a problem, one of my columns is an icon with ngbDropdown and ngbDropdownMenu, when I scrolling, the icon appear on header. Do you know how can I solve this? Thanks.

  • @عليجاسم-ق6م7ي
    @عليجاسم-ق6م7ي 5 ปีที่แล้ว

    Very beautiful

  • @separatetraveler8226
    @separatetraveler8226 5 ปีที่แล้ว

    Excellent.. sir.
    It's really helpful to us.
    Thanks.

  • @SunilNeelam
    @SunilNeelam 5 ปีที่แล้ว +1

    hitting like button several times :)

  • @grandhegopichand4374
    @grandhegopichand4374 5 ปีที่แล้ว

    Super..I like your videos very much..and so useful..
    Thank you

  • @gauravmaurya8745
    @gauravmaurya8745 5 ปีที่แล้ว +1

    Bro you are awesome💜💜by the way can please make of awesome post single page design means when we click on post after that the post page will open. Please share some design on that

  • @EminoMeneko
    @EminoMeneko 5 ปีที่แล้ว

    Very nice. Thanks.

  • @edieko2808
    @edieko2808 4 ปีที่แล้ว

    thank you sooooooooo much !! (first time for me writing comments on TH-cam.)

  • @brunotourinho4810
    @brunotourinho4810 5 ปีที่แล้ว +2

    One question: how do you deal with the little visible space on top of the sticky bar? ,
    I do not understand, can you explain the use of the pseudoclass better?

  • @vigneshs886
    @vigneshs886 5 ปีที่แล้ว +1

    Very nice

  • @Saudavelpro
    @Saudavelpro 5 ปีที่แล้ว

    Awesome

  • @franciscangco2664
    @franciscangco2664 5 ปีที่แล้ว

    Thanks so much for this but I had experience a problem.
    After placing the property "position: fixed" on the table headers the border disappears. Any workaround?

  • @natthanankunchokwanit9018
    @natthanankunchokwanit9018 5 ปีที่แล้ว

    Great!! Does it work with overflow-x?

  • @dhavalbheda3005
    @dhavalbheda3005 4 ปีที่แล้ว

    Awsome thx...

  • @franciscangco2664
    @franciscangco2664 5 ปีที่แล้ว +2

    Hey buddy I've been following you and been recommending your videos to my friends.
    Can I request a tutorial on how to choose colors? Colors for me is the hardest part to show a good UI.

    • @austinspruill6685
      @austinspruill6685 4 ปีที่แล้ว

      www.w3schools.com/colors/colors_picker.asp

  • @aamirkhan-ql8er
    @aamirkhan-ql8er 5 ปีที่แล้ว

    Is it responsive design

  • @realindian9721
    @realindian9721 5 ปีที่แล้ว

    Very gudd job bro. I use ur code in my website, see my link yesterday.

  • @nuruddeenmuazu1439
    @nuruddeenmuazu1439 3 ปีที่แล้ว

    Pls help with the tutorial on how to stick some portion of my website on scrollbar event.
    here are some examples
    1) twitter home page, the column from the right is stocked on scroll event
    2) user profile on facebook, the column from the left is stick on scroll event.
    pls Irshad help me and tutor us this trick...
    yours Nuruddeen Mu'azu (Dr. Annoor) from Nigeria
    thank you once again

  • @mariolopes6262
    @mariolopes6262 5 ปีที่แล้ว +2

    Bem legal. Antigamente era uma gambiarra para fazer isso 😀

  • @Technical3Idiots
    @Technical3Idiots 5 ปีที่แล้ว +1

    Lovely sir 🙏🙏

  • @devState226
    @devState226 5 ปีที่แล้ว

    happy new year

  • @VenThing
    @VenThing 5 ปีที่แล้ว

    wow ..how to be you ..hahaha ..hiw to code like a pro like you sir ..any tips

  • @RehmatSG
    @RehmatSG 5 ปีที่แล้ว +1

    Nice

  • @mridulsingla7594
    @mridulsingla7594 5 ปีที่แล้ว

    You are Supercalifragilisticexpialidocious.

  • @wissemansi
    @wissemansi 5 ปีที่แล้ว

    good job bro

  • @josuecarvalho7498
    @josuecarvalho7498 5 ปีที่แล้ว

    hello, how can i fix two or more lines?

  • @RahulKumar-wv4ti
    @RahulKumar-wv4ti 3 ปีที่แล้ว

    thanks

  • @Will-fh9fj
    @Will-fh9fj ปีที่แล้ว

    謝謝!

  • @mgrao6083
    @mgrao6083 4 ปีที่แล้ว +2

    It won’t work on IE, which doesn’t support position sticky

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  4 ปีที่แล้ว

      ie is kicked out from windows

    • @mgrao6083
      @mgrao6083 4 ปีที่แล้ว

      I like your solution but I need it to be work on IE. Do you have any other solution

    • @mgrao6083
      @mgrao6083 4 ปีที่แล้ว

      ??

  • @Dieselyura-u2p
    @Dieselyura-u2p 5 ปีที่แล้ว

    now people know who you are from the table=)

  • @СамсунгСамсунг-я1щ4э
    @СамсунгСамсунг-я1щ4э 5 ปีที่แล้ว +1

    Проста klass

  • @sokdir
    @sokdir 5 ปีที่แล้ว

    Thank you

  • @IsmaelFloresgenerasiondefuego
    @IsmaelFloresgenerasiondefuego 5 ปีที่แล้ว

    😍😍😍😍😍

  • @sanjay94827
    @sanjay94827 5 ปีที่แล้ว +3

    first like and first comment

  • @zahidahmadallaie6824
    @zahidahmadallaie6824 5 ปีที่แล้ว

    Are you Indian?

  • @zainmohsin6556
    @zainmohsin6556 5 ปีที่แล้ว +1

    504th viewer

  • @romeswararao9431
    @romeswararao9431 4 ปีที่แล้ว

    if use scrolling, overriding text color

  • @mhasancoder
    @mhasancoder 5 ปีที่แล้ว +1

    You just missed something !
    add some extra css:
    td{
    text-align: center;
    }
    td:nth-of-type(odd){
    background-color: #edf860;
    }
    td:nth-of-type(even){
    background-color: #f0e675;
    }

    • @EminoMeneko
      @EminoMeneko 5 ปีที่แล้ว

      He missed nothing. It is up to anyone to make their own choices.
      Nice proposition.
      I'd rather act on tr instead of td. It's easier to follow a column than a line.

  • @hafizurrahmanfahim8820
    @hafizurrahmanfahim8820 5 ปีที่แล้ว +1

    2nd commant

  • @sawzarnilinhtay470
    @sawzarnilinhtay470 5 ปีที่แล้ว

    plz responsive design for this videos

  • @QUOCNGUYEN-ee5vw
    @QUOCNGUYEN-ee5vw 3 ปีที่แล้ว

    I copy code %. It not working.

  • @102030anurag
    @102030anurag 4 ปีที่แล้ว

    Does anyone know same trick for IE11

  • @obinote
    @obinote 5 ปีที่แล้ว

    I'm Trying for stycky on the left...
    th:nth-child(1){
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    }
    td:nth-child(1){
    position: sticky;
    left: 0;
    background: #fff;
    }

  • @pavankumarvangala2548
    @pavankumarvangala2548 5 ปีที่แล้ว

    Hi It is bot working Safari Browser

  • @Will-fh9fj
    @Will-fh9fj ปีที่แล้ว

    謝謝!

  • @abdulwahab-jj9hv
    @abdulwahab-jj9hv 5 ปีที่แล้ว

    Awesome