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

Поделиться
HTML-код
  • Опубликовано: 27 ноя 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

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

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

  • @mohammadazim2456
    @mohammadazim2456 3 дня назад

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

  • @vladimirtravkin4958
    @vladimirtravkin4958 2 месяца назад +1

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

  • @stephen1569
    @stephen1569 Год назад +7

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

  • @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 RUclips game. I do have very few subscribers and among them only 100-150 subscribers are active one.

  • @nazmussakib9346
    @nazmussakib9346 2 месяца назад +1

    Loved it bro...❤

  • @mhdafizhaaw8731
    @mhdafizhaaw8731 3 месяца назад +1

    thanks for sharing.. its so pretty!

  • @harsh_0031
    @harsh_0031 6 месяцев назад

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

  • @Pihu_Hub
    @Pihu_Hub 9 месяцев назад

    Amazing video Bro. ❤

  • @Sc4ryMonsters
    @Sc4ryMonsters 7 месяцев назад +1

    I love your video, it's very useful.

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

  • @HyperUpscale
    @HyperUpscale 11 месяцев назад

    Sweet! That's a perfect tutorial!

    • @CodingDesign
      @CodingDesign  11 месяцев назад +1

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

  • @gastonbuesas2081
    @gastonbuesas2081 Год назад

    so good tutorial, nice table

  • @AltaLand2023
    @AltaLand2023 10 месяцев назад

    Great bro, thanks!
    Amazing explantion!

  • @powerofdiscipline
    @powerofdiscipline Год назад +1

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

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

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

  • @MulMukendi
    @MulMukendi 5 месяцев назад

    brilliant video man

  • @ashishjangid7845
    @ashishjangid7845 Год назад

    This is very important for me.
    Thank you 🙏

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

  • @Wolfgangs_leduan
    @Wolfgangs_leduan Год назад

    excellent

  • @srivatsan9163
    @srivatsan9163 Месяц назад

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

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

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

  • @fikriadnan9784
    @fikriadnan9784 Год назад

    Amazing 👌👌

  • @IsnaReni
    @IsnaReni Год назад +2

    thank you sm

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

  • @zaurhasanov5458
    @zaurhasanov5458 Год назад

    Thanks a lot, brother!

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

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

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

  • @marcoagnelli7363
    @marcoagnelli7363 11 месяцев назад

    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  11 месяцев назад +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".

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

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

  • @maashuudsaeed-kv4gv
    @maashuudsaeed-kv4gv Год назад

    Do you have a website? Or private class?

    • @CodingDesign
      @CodingDesign  Год назад

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

  • @manimaranramakrishnan6434
    @manimaranramakrishnan6434 Год назад

    Thank y🎉

  • @pistachio7900
    @pistachio7900 Год назад

    👍👍👍

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

  • @leonardogabriel8582
    @leonardogabriel8582 Год назад

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

    • @CodingDesign
      @CodingDesign  Год назад

      Depende totalmente dos seus dados gerados.

  • @OUTLOOKTECHCENTER
    @OUTLOOKTECHCENTER Год назад

    The export file is not working for me

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

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

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

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

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