The table element in Avada has no styling options so if you want to move beyond the basics you have to use custom CSS. Fortunately, this is one of the few instances where it is really straightforward. I recommend adding a class to the table element — .datatable in the case. This applies a class to the containing div. Then you target the table elements individually. In an uncharacteristic fashion, the table element is missing some key WCAG features — captions, row headings, and roles. The basic table includes a horizontal scroll (overflow-x) on mobile.

Column 1 Column 2 Column 3 Column 4
Column 1 Value Column 2 Value Column 3 Value Column 4 Value
Column 1 Value 2 Column 2 Value 2 Column 3 Value 2 Column 4 Value 2
Column 1 Value 3 Column 2 Value 3 Column 3 Value 3 Column 4 Value 3
Column 1 Value 4 Column 2 Value 4 Column 3 Value 4 Column 4 Value 4
Column 1 Value 5 Column 2 Value 5 Column 3 Value 5 Column 4 Value 5
Column 1 Value 6 Column 2 Value 6 Column 3 Value 6 Column 4 Value 6
Column 1 Value 7 Column 2 Value 7 Column 3 Value 7 Column 4 Value 7
Column 1 Value 8 Column 2 Value 8 Column 3 Value 8 Column 4 Value 8
Column 1 Value 9 Column 2 Value 9 Column 3 Value 9 Column 4 Value 9
Column 1 Value 10 Column 2 Value 10 Column 3 Value 10 Column 4 Value 10
Column 1 Value 11 Column 2 Value 11 Column 3 Value 11 Column 4 Value 11
Column 1 Value 12 Column 2 Value 12 Column 3 Value 12 Column 4 Value 12
Copy to Clipboard