Responsive HTML Table With Pure CSS - Web Design/UI Design

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

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

  • @sodatta11
    @sodatta11 11 หลายเดือนก่อน +7

    Namaste Jeet, I am a backend engineer with 17 years of Industry Experience and I really love your videos. Thanks for sharing your knowledge with us.

    • @CodingDesign
      @CodingDesign  11 หลายเดือนก่อน +2

      Thank you!
      I'll try my best to bring more helpful content in the future too.

  • @aadilmode7715
    @aadilmode7715 2 หลายเดือนก่อน +2

    Finally someone who has the skills to do it without any fricking frameworks. Thanks bro for using vanilla js and css

    • @CodingDesign
      @CodingDesign  หลายเดือนก่อน

      You're most welcome.

  • @sanket3236
    @sanket3236 2 ปีที่แล้ว +8

    Backdrop filter was awesome bro. Keep putting such videos 🙌

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

    Great presentation! Very useful; and a beautiful design. Congratulations!

  • @pctechinfosys
    @pctechinfosys 6 หลายเดือนก่อน +1

    One of the most precise video with great details of CSS properties, really awesome work with complete clarity

    • @CodingDesign
      @CodingDesign  4 หลายเดือนก่อน

      Much appreciated

  • @douglaszambrano5644
    @douglaszambrano5644 11 หลายเดือนก่อน

    Absolutely loves it. ❤Keep it up thumbs up 👍🏻👍🏻👍🏻👍🏻

    • @CodingDesign
      @CodingDesign  11 หลายเดือนก่อน

      Thank you! Hope you'll show your same ❤ & support in the future too.

  • @SilviuIT-tn3dn
    @SilviuIT-tn3dn ปีที่แล้ว +1

    sooooo cool video, edit, example, explenation!!!

  • @nazmussakib9346
    @nazmussakib9346 2 หลายเดือนก่อน +1

    Loved it bro...❤

    • @CodingDesign
      @CodingDesign  หลายเดือนก่อน

      Glad to hear that.

  • @vladimirtravkin4958
    @vladimirtravkin4958 2 หลายเดือนก่อน +1

    Thank you so much. Easy, accessible, understandable... I get likes and subscriptions.

    • @CodingDesign
      @CodingDesign  หลายเดือนก่อน

      You're welcome.

  • @sonnyreyes8108
    @sonnyreyes8108 5 หลายเดือนก่อน

    I love your contents💪😍 Please keep on creating videos like this

    • @CodingDesign
      @CodingDesign  4 หลายเดือนก่อน

      Thanks. But it's difficult to survive in this TH-cam game. I do have very few subscribers and among them only 100-150 subscribers are active one.

  • @mhdafizhaaw8731
    @mhdafizhaaw8731 3 หลายเดือนก่อน +1

    thanks for sharing.. its so pretty!

    • @CodingDesign
      @CodingDesign  หลายเดือนก่อน

      I'm more than happy to help.

  • @Pihu_Hub
    @Pihu_Hub 9 หลายเดือนก่อน

    Amazing video Bro. ❤

    • @CodingDesign
      @CodingDesign  8 หลายเดือนก่อน

      Glad you liked it.

  • @Sc4ryMonsters
    @Sc4ryMonsters 7 หลายเดือนก่อน +1

    I love your video, it's very useful.

    • @CodingDesign
      @CodingDesign  7 หลายเดือนก่อน

      Glad you think so!

  • @AltaLand2023
    @AltaLand2023 10 หลายเดือนก่อน

    Great bro, thanks!
    Amazing explantion!

    • @CodingDesign
      @CodingDesign  9 หลายเดือนก่อน

      Glad it helped!

  • @mohammadazim2456
    @mohammadazim2456 8 วันที่ผ่านมา

    Really great...❤ I need your help in customising my table

  • @HyperUpscale
    @HyperUpscale 11 หลายเดือนก่อน

    Sweet! That's a perfect tutorial!

    • @CodingDesign
      @CodingDesign  11 หลายเดือนก่อน +1

      Thanks!
      You can provide more constructive criticism for my better content.

  • @stephen1569
    @stephen1569 ปีที่แล้ว +7

    Thank you for sharing such a creative table solution. Loved it !!

  • @harsh_0031
    @harsh_0031 7 หลายเดือนก่อน

    thank you so much!! You made my work a lot easier and saved me a lot of time. 🥳

    • @CodingDesign
      @CodingDesign  7 หลายเดือนก่อน

      Glad to hear that!

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

    Thank you for such a Great and Simple design. Many ways to configure. Peace :}✌

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      You're welcome. Keep l❤ving & supporting.

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

    Thank you so much for the tutorial i was looking for exactly same thing

  • @gastonbuesas2081
    @gastonbuesas2081 ปีที่แล้ว

    so good tutorial, nice table

  • @ashishjangid7845
    @ashishjangid7845 ปีที่แล้ว

    This is very important for me.
    Thank you 🙏

  • @MulMukendi
    @MulMukendi 5 หลายเดือนก่อน

    brilliant video man

    • @CodingDesign
      @CodingDesign  4 หลายเดือนก่อน

      Much appreciated

  • @phonevelarde
    @phonevelarde ปีที่แล้ว

    Excelente job. Thanks for shared. You have new sub.

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Awesome, thank you! Hope you'll show you same l❤ve & support in the future too.

  • @urovincent3868
    @urovincent3868 4 หลายเดือนก่อน

    My guy 👍👍👍

    • @CodingDesign
      @CodingDesign  4 หลายเดือนก่อน

      More than happy to help.

  • @codeplayandlearn.7788
    @codeplayandlearn.7788 ปีที่แล้ว

    Thanks for this creative master piece.

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

      Glad you like it!
      Hope you'll show your same ❤ & support in the future too.

    • @codeplayandlearn.7788
      @codeplayandlearn.7788 ปีที่แล้ว

      @@CodingDesign sure, l will.

  • @epcg2media
    @epcg2media ปีที่แล้ว

    This helped me a lot. Thanks!

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Glad to hear it!
      Hope you'll show your same ❤ & support in the future too.

  • @uzairmuhammad4871
    @uzairmuhammad4871 ปีที่แล้ว

    Man i just wonder how to start coding without any tutorials like you , just asking how much is your coding experience brother

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      I've started my coding journey before 3 years. But I didn't give my 😭100% on Web Development.
      Within these years I've been trying other stuffs such as:
      a. 🎬 Video Editing
      b. 💠 Logo Design
      c. 🎨Graphics/UI/UX Design
      d. ✨Animation & many more.
      You can called me "Jack of all trades, master of none"

  • @dinatjahanmilitasnim4614
    @dinatjahanmilitasnim4614 ปีที่แล้ว

    This is a really good video

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

      Thank you! hope you'll show your same l❤ve & support in the future too.

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

    thank you sm

  • @Wolfgangs_leduan
    @Wolfgangs_leduan ปีที่แล้ว

    excellent

  • @fikriadnan9784
    @fikriadnan9784 ปีที่แล้ว

    Amazing 👌👌

  • @zaurhasanov5458
    @zaurhasanov5458 ปีที่แล้ว

    Thanks a lot, brother!

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

    Awesome design.....
    I followed all the code, but vertical scroll for table body section not working, it remains hidden, while horizontal scroll works properly. What may be the issue..?

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      As you know I've used 📢_*"Overflow : auto;"*_ so, you have to create enough *_"📈Table Data"_*__. According to my Table's height, if you ➕add more than 7️⃣seven __*_"Data"_* to my table, you'll get that _Vertical Scrollbar_.

  • @srivatsan9163
    @srivatsan9163 2 หลายเดือนก่อน

    One doubt- html, css, js... logos to be applied in visual studio code, how to do that mate?

  • @marcoagnelli7363
    @marcoagnelli7363 ปีที่แล้ว

    Hi, sorry, I downloaded the folder directly from github, html and css work but it's as if the javascript file doesn't work (the various filters, sorting, search button, export etc. don't work).
    come, can I solve it?

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

      I've done some update. You can check out.

    • @marcoagnelli7363
      @marcoagnelli7363 11 หลายเดือนก่อน

      @@CodingDesign perfect, it works... for other questions where can I ask you? for example, (I only imported the javascript code), I would like to implement only the search function, I only copied point 1 of the js file but it still sorts the columns that I don't want to have...how can I solve it? what do I have to eliminate from point 1 to not have sorting and only search?

    • @CodingDesign
      @CodingDesign  11 หลายเดือนก่อน

      @@marcoagnelli7363 Within the code, I've clearly given hints through "comments".
      But anyway, you just only need "searchTable" function along with used "variables" & "event listener".

  • @attilaguba856
    @attilaguba856 ปีที่แล้ว

    Good design ! But it shouldn't be scrolling horizontal way it's notbthe best for thr user! Check responsive JQuery datatable 😉😊

  • @SHADEN-oh6vn
    @SHADEN-oh6vn ปีที่แล้ว

    First of all, thank you so much!!
    is it possible to get rid of the empty area on the right? (the scroll bar area)

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      You can hide scrollbar with display css property.

  • @ayeshamunshi8043
    @ayeshamunshi8043 9 หลายเดือนก่อน

    i am trying to work on the jquery / javascript to tap the row select event, but its not working

    • @CodingDesign
      @CodingDesign  8 หลายเดือนก่อน

      I'm sorry! I didn't get your question. What are you actually trying to achieve?.

    • @ayeshamunshi8043
      @ayeshamunshi8043 8 หลายเดือนก่อน

      @@CodingDesign row click event, some how I finallyanaged to find the answer.

  • @huyle5011
    @huyle5011 ปีที่แล้ว

    How to change the font of the text for specific rows in the table. For example 1 row is a different font and another row is a different font.

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      You can do it easily with ":nth-child()" pseudo CSS class.
      ⚠ But I recommend not to do so, if you want better UI.

  • @imranbeltran9354
    @imranbeltran9354 ปีที่แล้ว

    I tried this in my browser, greatwork, but i dont know why the table doesnt fill the whole box i just copied the same code as yours but got different results

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      I've given "Source Code" for this whole ▶ playlist. Please check out video's description.

  • @atefbo6363
    @atefbo6363 6 หลายเดือนก่อน

    It's possible to create more than 1 table inside main area; side by side or 1 down of other ?

    • @CodingDesign
      @CodingDesign  4 หลายเดือนก่อน

      Yes! but you've to make some changes in Layouts.

  • @pistachio7900
    @pistachio7900 ปีที่แล้ว

    👍👍👍

  • @leonardogabriel8582
    @leonardogabriel8582 ปีที่แล้ว

    eu consigo por esta estilização numa tabela de um bando de dados?

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Depende totalmente dos seus dados gerados.

  • @manimaranramakrishnan6434
    @manimaranramakrishnan6434 ปีที่แล้ว

    Thank y🎉

  • @maashuudsaeed-kv4gv
    @maashuudsaeed-kv4gv ปีที่แล้ว

    Do you have a website? Or private class?

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      For now I don't have. But I'm planning.

  • @SilviuIT-tn3dn
    @SilviuIT-tn3dn ปีที่แล้ว

    @05:20 you add a background image, how to set my html & css in that way:
    I want to add 2 images and then the table. In t he end to be same result as yours.


    ...

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Do you want your image to be at the "BACK" of Table or just "ABOVE" of it.

  • @kulvinder8211
    @kulvinder8211 9 หลายเดือนก่อน

    How do I make a table by Google sheet data like this?

    • @CodingDesign
      @CodingDesign  8 หลายเดือนก่อน

      We can't directly read files using JS unless if you're using other backend technologies.
      One of the alternative way is to use library: Tabletop.js
      OR
      check out this stack overflow link this might help:
      ✅ stackoverflow.com/questions/70902197/accessing-a-public-google-sheets-data-directly-from-client-side-javascript

  • @anbhuonline
    @anbhuonline 8 หลายเดือนก่อน

    U beauty

    • @CodingDesign
      @CodingDesign  8 หลายเดือนก่อน

      Was it helpful?

  • @OUTLOOKTECHCENTER
    @OUTLOOKTECHCENTER ปีที่แล้ว

    The export file is not working for me

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Did you watch whole video playlist?

  • @jabarlew
    @jabarlew 2 หลายเดือนก่อน +1

    this is not responsive wen on mobile phone you need to scrool to sides to see rest of table

    • @CodingDesign
      @CodingDesign  หลายเดือนก่อน

      I'm planning to create separate video for mobile version as well.

  • @optobeats
    @optobeats 3 หลายเดือนก่อน

    It's not responsive table... Why you think if you add scrollbar it will start be responsive???

    • @rahmana5813
      @rahmana5813 3 หลายเดือนก่อน

      Watch whole video in playlist bro

    • @CodingDesign
      @CodingDesign  หลายเดือนก่อน

      You're right! In the mobile screen you've to take totally different approach. So, I'm planning separate video for that topic as well.

  • @PaulLep550
    @PaulLep550 ปีที่แล้ว

    bro where uh from ?

  • @A7medMah7moud
    @A7medMah7moud ปีที่แล้ว

    i liked that verymach ؟?

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Thank you!
      Hope you'll show your same ❤ & support in the future too.

  • @Hafiidoow
    @Hafiidoow ปีที่แล้ว

    Code? Plz 😭 I wanna defend my project

    • @ru2979
      @ru2979 ปีที่แล้ว

      code is secret ,please reveal ur idenTITY first 😢

    • @CodingDesign
      @CodingDesign  ปีที่แล้ว

      Please check video's description, I've given 🔗link.