Controlling column widths for Table Element
-
Hello,
I would like to know if you can help me with Xtemos Table Element for Elementor?
My product pages typically consist of specification data, set out in two adjacent tables on desktop.
However, when the same data tables on a mobile device stack (as desired), it becomes obvious that the column widths are not the same and the result is visually staggered data – which my client is finding undesirable. Please see attached mobile screen shot.
Are you able to provide some .css which I can apply to both table elements, forcing the the two columns to be exactly 50% / 50% in both instances for both desktop AND mobile display, thereby making the column widths across the two tables consistently the same, which will be more obviously when stacked on mobile?
Thank you
Craig
Attachments:
You must be
logged in to view attached files.
Hello,
You need to add an extra CSS class to the container with the table – xts-table-equal-cols. Then add the following code snippet to the Custom CSS section in Theme Settings
.xts-table-equal-cols .xts-table-cell {
width: 50%;
}
Kind Regards
.
