How to make a Responsive Dynamic HTML table in Oxygen Builder/ACF/MetaBox

Learn how to create a proper accessible HTML Table with Dynamic data using Oxygen and ACF Pro or Metabox.

Oxygen Builder Tutorial | WordPress
#OxygenBuilder #Oxygen #htmltable

CSS Link:
I've updated the CSS to use table_wrapper ID for specificity on all table tag selectors.

CHAPTERS
00:00 - Introduction
01:20 - Setting up HTML table
14:20 - Setting up Responsive Table
23:40 - Setting up ACF Repeater
27:20 - Adding Repeater to HTML table

=============================================
=============================================

=============================================
=============================================

[DesignwithCracka]

CSS Link:
I've updated the CSS to use table_wrapper ID for specificity on all table tag selectors.

[premnathd]

Great Tutorial. You can inspect the update button and remove disabled style to make the update button work again without refreshing and avoid reworking

[chrisclaghorn]

Love the tutorial! I was using static text but some of my table data was long and appearing under the table headings on mobile. I added a 50% padding to the left for #table_wrapper td and it made the text wrap in case anyone runs into the same issue. Keep up the good work!!

[eucalyptech]

Very clever way to do a responsive and dynamic table ! Thank you and well done Udoro !

[martinrosner]

great tutorial… exact what I need actually!

[JoyHints]

Impressive 👏. I just started using bricks, I will be able to replicate this in bricks but the grid bit is what will limit me. Wish you make same video for bricks too.

[ArielBerloto]

Awesome tutorial! Thank you. A link to the CSS could be great.

[dcoburn]

This is a great tutorial, thank you for sharing. I'm running into an issue that the content in the data column is being covered when the td:before creates the label since the content in the right column is ending up under the label block. I've tried restricting the width on the right column by putting a class of .right-column, but that just makes the whole table shrink. Is there a way around this?

[LeonardoCalicaIV]

hi Cracka, thank you for this awesome tutorial. Do you know how to add colspans in oxygen to merge some <td>s ?

[CountChrisdo]

Is there a way to do this if you don't have ACF Pro?

[JoyHints]

Am wondering if this would work with bricks query builder using ACF nested repeater🤔

[sadhonkumar]

we want a video for creating ACF category and tags how to show them in repeater

[tomashudolin]

Thank you for that tutorial. The problem is, that my styling isn't displayed on the frontend even in oxy everything works well. On the frontend the user agent stylesheet is applyed what is strange, because I thought that Oxygen is disabling it.

[Permaslug]

Haha you are a keyboard machine as well! :)