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