How to Create Mobile Responsive Table on WordPress Without Plugins

Поделиться
HTML-код
  • Опубликовано: 9 янв 2025

Комментарии • 31

  • @yogeshwaranravi
    @yogeshwaranravi 3 года назад +3

    From this video I'm learning, if I learn css and html. I can customize my website to my likes.

  • @denisnevesdearaujo8768
    @denisnevesdearaujo8768 3 года назад +3

    Your content rocks, man! Cheers!

    • @JackCao
      @JackCao  3 года назад

      Thank you! Glad you like them! 🙏

  • @akashgautam2973
    @akashgautam2973 3 года назад +1

    Thanks for explaining in a simple way.👍

  • @ichechiecknteogwuija4641
    @ichechiecknteogwuija4641 2 года назад +1

    Really helpful. My theme had the option for a table that converts the row into a column but it was not a good option for a comparison post where you want readers to see each row side-by-side with a column. Thanks

  • @phatmanner
    @phatmanner 3 года назад

    Thank you for helping me. Awesome video.

  • @IslalamicTalks
    @IslalamicTalks 7 месяцев назад

    One of the best video ❤
    Like + Subscribe Done
    Thank You (Watching it from Pakistan 🇵🇰)
    Wasted so much time in useless videos but your video worth it. Again Thanks a lot ❣️

  • @newboere
    @newboere 2 года назад

    Thank you you are a hero!

  • @SeyitKaya-x4b
    @SeyitKaya-x4b Год назад

    Thank you! Is there a guide to keep the structure of the table and put the columns underneath each other in the mobile version?

  • @D3VL0PR
    @D3VL0PR 7 месяцев назад

    thanks man!

  • @timbaggaley
    @timbaggaley 3 года назад +1

    I'm using the Genesis framework with the Genesis One-Pager child. Building a table by hand-code and following your video. When I get to put the data headings in in html, Gutenberg spits its dummy out and wants to 'attempt a block recovery'. Shame because it was looking good until then.

  • @jswift4240
    @jswift4240 3 месяца назад

    Hi, how could I put a search bar or filter in top of the table?😊

  • @MsTylil
    @MsTylil 3 года назад

    hi any suggestion how to create collapse table row in wordpress? TIA

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

    what if I make more than one table in my blog. doesn't the css code of the previous table crash with the newly created table css code?

  • @sachinsaagar7531
    @sachinsaagar7531 3 года назад +1

    Jack before hitting publishing if i see preview option of using mobile or simple click inspect and click mobile. Responsiveness is different.
    And when i publish and hit mobile via customize option (theme) mobile preview or "inspect "of publishing content page then click mobile
    In both case responsiveness is showing different.
    In first case mobile responsiveness is showing poor. After publishing mobile responsiveness is showing correct.
    What should i choose to check?

    • @JackCao
      @JackCao  3 года назад

      Always refer to the live site (or the preview page), and resize your browser to the smallest width (this represents the mobile view). Never trust the view from the WordPress editor.

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

    I want to display a table with data that visitors will post.
    Any idea for the simplest method?

  • @evindejesusvisuals6407
    @evindejesusvisuals6407 3 года назад +1

    What if I want to have the table scroll horizontal on mobile? It only works if I mess with the html code but if I do that then it breaks the table block to a html block

    • @JackCao
      @JackCao  3 года назад

      The table block from the WordPress editor is scrollable horizontally on mobile by default.

    • @evindejesusvisuals6407
      @evindejesusvisuals6407 3 года назад +1

      @@JackCao not really it stacks

    • @evindejesusvisuals6407
      @evindejesusvisuals6407 3 года назад

      Maybe my theme is just messing with the code. But I don't want to change the theme so I guess I'm stuck

    • @yoyotaka14
      @yoyotaka14 2 года назад

      Wp tablet builder plugin...

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

    What if I don't want any wrapping on a specific column?

  • @aurematic
    @aurematic 3 года назад +2

    So the way to make a Gutenberg page responsive is to know how to edit HTML and CSS... that's why Gutenberg is not there yet.
    Elementor is WAAAAAAAAY easier than Gutenberg.

    • @JackCao
      @JackCao  3 года назад +1

      Lol! This is just for tables. Try making this mobile responsive table on Elementor. Bet you can't too. Lol!

    • @saadjamil1761
      @saadjamil1761 2 года назад

      @@JackCao where are the options for making blocks responisive? Can you please help? thanks

  • @kartikgaur1409
    @kartikgaur1409 2 года назад

    I WANT TO MAKE TABLE RESPONSIVE BUT I CAN'T COULD YOU PLEASE HELP ME

  • @cooltechandmore
    @cooltechandmore 3 года назад +1

    very misleading i thought you were going to select from the db not type in values

  • @mrehmanjaved
    @mrehmanjaved 2 года назад

    Need Help

  • @kosovacoin--tothemoon634
    @kosovacoin--tothemoon634 8 месяцев назад

    Or like this it worked fine for me:
    @media (max-width: 767px) {
    table {
    overflow-x: auto;
    display: block;
    }
    th, td {
    min-width: 100px;
    font-size: 12px; /* Adjust the font size as needed */
    }
    }

  • @kamolvideozone
    @kamolvideozone 2 года назад +1

    Thank you for helping me. Awesome video.