[Resolved] Translating an HTML table with the advanced translator

Problem:
You are trying to translate an HTML/CSS table using the Advanced Translation Editor, but encounter issues where the CSS styling is lost during the translation process. Previously, the editor only showed the strings of each cell for translation, but now it affects the styling.
Solution:
The issue arises from the mix of CSS and HTML in the translation process. The Advanced Translation Editor is not designed to handle CSS, JavaScript, or PHP; it strips out HTML markup and merges it again after translating the strings. To resolve this, you should use the field for "Custom CSS" on the advanced tab of the HTML widget.

Alternative:
1. Remove the link tag and the CSS from the HTML you are translating to ensure the translation works as expected.
2. Separate concerns by including the CSS in a "Hello Elementor Child Theme". You can set up the child theme following this guide: Setting up the "Hello Elementor Child Theme"
3. Include the stylesheet in the theme file functions.php:

function hello_elementor_child_enqueue_scripts() {
    // Load Font Awesome
    wp_enqueue_style(
        'font-awesome-6',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
        array(),
        '6.5.0'
    );
 
    // Load custom table styles
    wp_enqueue_style(
        'custom-table-style',
        get_stylesheet_directory_uri() . '/css/custom-table.css',
        array(),
        '1.0'
    );
}
add_action('wp_enqueue_scripts', 'hello_elementor_child_enqueue_scripts', 20);

4. Move your CSS to a file at /css/custom-table.css.

This solution might be outdated or not applicable to your specific case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If the issue persists, please open a new support ticket.