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

Поділитися
Вставка
  • Опубліковано 28 січ 2025

КОМЕНТАРІ • 116

  • @sodatta11
    @sodatta11 Рік тому +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  Рік тому +2

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

  • @aadilmode7715
    @aadilmode7715 4 місяці тому +2

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

  • @sanket3236
    @sanket3236 2 роки тому +8

    Backdrop filter was awesome bro. Keep putting such videos 🙌

  • @magickomchanell4556
    @magickomchanell4556 23 дні тому

    profesional coder and good teacher, thanks for your amazing vids!

  • @almirsilva838
    @almirsilva838 Рік тому +5

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

  • @pctechinfosys
    @pctechinfosys 8 місяців тому +1

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

  • @SilviuIT-tn3dn
    @SilviuIT-tn3dn Рік тому +1

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

  • @douglaszambrano5644
    @douglaszambrano5644 Рік тому

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

    • @CodingDesign
      @CodingDesign  Рік тому

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

  • @stephen1569
    @stephen1569 Рік тому +7

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

  • @sonnyreyes8108
    @sonnyreyes8108 7 місяців тому

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

    • @CodingDesign
      @CodingDesign  6 місяців тому

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

  • @HyperUpscale
    @HyperUpscale Рік тому

    Sweet! That's a perfect tutorial!

    • @CodingDesign
      @CodingDesign  Рік тому +1

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

  • @nazmussakib9346
    @nazmussakib9346 4 місяці тому +1

    Loved it bro...❤

  • @vladimirtravkin4958
    @vladimirtravkin4958 4 місяці тому +1

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

  • @francislambert5189
    @francislambert5189 2 роки тому +3

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

    • @CodingDesign
      @CodingDesign  Рік тому

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

  • @mhdafizhaaw8731
    @mhdafizhaaw8731 5 місяців тому +1

    thanks for sharing.. its so pretty!

  • @Pihu_Hub
    @Pihu_Hub 11 місяців тому

    Amazing video Bro. ❤

  • @Sc4ryMonsters
    @Sc4ryMonsters 9 місяців тому +1

    I love your video, it's very useful.

  • @harsh_0031
    @harsh_0031 9 місяців тому

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

  • @powerofdiscipline
    @powerofdiscipline Рік тому +1

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

  • @AltaLand2023
    @AltaLand2023 Рік тому

    Great bro, thanks!
    Amazing explantion!

  • @ashishjangid7845
    @ashishjangid7845 Рік тому

    This is very important for me.
    Thank you 🙏

  • @gastonbuesas2081
    @gastonbuesas2081 Рік тому

    so good tutorial, nice table

  • @mohammadazim2456
    @mohammadazim2456 2 місяці тому +1

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

    • @CodingDesign
      @CodingDesign  Місяць тому

      Glad you like it! Let me know what kind of customization you need.

  • @srivatsan9163
    @srivatsan9163 4 місяці тому

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

  • @MulMukendi
    @MulMukendi 7 місяців тому

    brilliant video man

  • @urovincent3868
    @urovincent3868 6 місяців тому

    My guy 👍👍👍

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

  • @codeplayandlearn.7788
    @codeplayandlearn.7788 Рік тому

    Thanks for this creative master piece.

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

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

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

  • @atefbo6363
    @atefbo6363 8 місяців тому

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

    • @CodingDesign
      @CodingDesign  6 місяців тому

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

  • @zaurhasanov5458
    @zaurhasanov5458 Рік тому

    Thanks a lot, brother!

  • @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"

  • @usmanfarismt1074
    @usmanfarismt1074 2 роки тому +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  2 роки тому

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

  • @ayeshamunshi8043
    @ayeshamunshi8043 11 місяців тому

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

    • @CodingDesign
      @CodingDesign  10 місяців тому

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

    • @ayeshamunshi8043
      @ayeshamunshi8043 10 місяців тому

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

  • @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 Рік тому

      @@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  Рік тому

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

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

  • @fikriadnan9784
    @fikriadnan9784 Рік тому

    Amazing 👌👌

  • @OUTLOOKTECHCENTER
    @OUTLOOKTECHCENTER Рік тому

    The export file is not working for me

  • @IsnaReni
    @IsnaReni Рік тому +2

    thank you sm

  • @Wolfgangs_leduan
    @Wolfgangs_leduan Рік тому

    excellent

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

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

  • @kulvinder8211
    @kulvinder8211 11 місяців тому

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

    • @CodingDesign
      @CodingDesign  10 місяців тому

      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

  • @attilaguba856
    @attilaguba856 Рік тому

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

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

  • @maashuudsaeed-kv4gv
    @maashuudsaeed-kv4gv Рік тому

    Do you have a website? Or private class?

    • @CodingDesign
      @CodingDesign  Рік тому

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

  • @jabarlew
    @jabarlew 4 місяці тому +1

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

    • @CodingDesign
      @CodingDesign  3 місяці тому

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

  • @manimaranramakrishnan6434
    @manimaranramakrishnan6434 Рік тому

    Thank y🎉

  • @PaulLep550
    @PaulLep550 Рік тому

    bro where uh from ?

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

  • @optobeats
    @optobeats 5 місяців тому

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

    • @rahmana5813
      @rahmana5813 5 місяців тому

      Watch whole video in playlist bro

    • @CodingDesign
      @CodingDesign  3 місяці тому

      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.

  • @anbhuonline
    @anbhuonline 10 місяців тому

    U beauty

  • @A7medMah7moud
    @A7medMah7moud Рік тому

    i liked that verymach ؟?

    • @CodingDesign
      @CodingDesign  Рік тому

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