Table Layout

Hey burdeMedia,

Thank you for the inquiry.

Would you mind providing a screenshot of the section or table that requires adjustment including the actual changes? You can use imgur, savvyify or dropbox for the screenshot. Thanks!

If you need the table to be scrollable, please set the Styling > Table Styling > Table Purpose to the second option (tabular data), then go to the Advanced > Responsive and set the Responsive Styling to the second option (scrollable) as well.

Best regards,
Ismael

Hi,
Thanks for your question, in order to make your heading rows span across multiple columns the table would use the colspan attribute, unfortunately, the Enfold table element doesn’t offer this feature and considering that you are also looking for advanced fixed columns and rows when scrolling I would recommend looking for a table plugin that offers these features.
I did find a stackoverflow example: Set colspan dynamically with jQuery to use as a base to try this with our table element, but please note that it will not work for the mobile table view.
The script works by removing the empty cells and adding the colspan attribute to the first cell with text, also the very first cell is ignored.

the result:

If you want to try this add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_colspan_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('#colspantest .avia-heading-row').each(function() {
    var tr = this;
    var counter = 0;
    var strLookupText = '';
    $('th', tr).each(function(index, value) {
      var th = jQuery(this);

      if ((th.text() == strLookupText) || (th.text() == "")) {
        counter++;
        th.prev().attr('colSpan', '' + parseInt(counter + 1,10) + '').css({textAlign : 'center'});
        th.remove();
      }
      else {
        counter = 0;
      }
      strLookupText = th.text();
    });
  });
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_colspan_script');

and add the custom ID colspantest to the table element

Best regards,
Mike