Can i make this table responsive?

Hi all,

i am trying to get a table of mine responsive for mobile. I does work a bit and resizes when i resize my screen but if the screen gets too small it will make the table go outside the mobile screen.

this is the part of code i have.

<li class="woof_tpl_3">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="racetimes">
        <tr id="firstrow" style="background-color: <?php echo get_tpl_option('tpl_3_header_bar_bg_color', $options) ?>; color: <?php echo get_tpl_option('tpl_3_header_bar_font_color', $options) ?>;">
            <td><?php _e('Product', 'woocommerce-products-filter') ?></td>
            <td><?php _e('Voeding', 'woocommerce-products-filter') ?></td>
			<td><?php _e('Stroom (nom)', 'woocommerce-products-filter') ?></td>
			<td><?php _e('Stroom (piek)', 'woocommerce-products-filter') ?></td>
			<td><?php _e('Communicatie', 'woocommerce-products-filter') ?></td>
            <td><?php _e('Artikel', 'woocommerce-products-filter') ?></td>
             </tr>
        <?php
        while ($the_products->have_posts()) : $the_products->the_post();
            global $post;
            ?>
            <tr>
                <td data-priority="6" style="width: 15%;">
                    <div style="padding: 15px;">
                        <a href="<?php the_permalink() ?>" target="_blank" class="thumbnail alignleft"><img src="<?php
                            if (has_post_thumbnail($post->ID))
                            {
                                $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail');
                                echo woof_aq_resize($img_src[0], get_tpl_option('tpl_3_img_width', $options), get_tpl_option('tpl_3_img_height', $options), true);
                            } else
                            {
                                echo WOOF_LINK . 'img/not-found.jpg';
                            }
                            ?>" alt="<?php the_title() ?>" /></a>
                    </div>
                    <div style="clear: both;"></div>
                </td>
				<td data-priority="2" style="width: auto;"><?php
                    $product = new WC_Product(get_the_ID());
                    echo $product->get_attribute('pa_voedings-spanning-dcac');
                    ?></td>
                <td data-priority="3" style="width: auto;"><?php
                    $product = new WC_Product(get_the_ID());
                    echo $product->get_attribute('pa_stroom-nominaal-a');
                    ?></td>
				<td data-priority="4" style="width: auto;"><?php
                    $product = new WC_Product(get_the_ID());
                    echo $product->get_attribute('pa_stroom-piek-a');
                    ?></td>
				<td data-priority="5" style="width: auto;"><?php
                    $product = new WC_Product(get_the_ID());
                    echo $product->get_attribute('pa_communicatie');
                    ?></td>
				<td data-priority="1" style="width: auto;"><?php
                    $product = new WC_Product(get_the_ID());
                    echo $product->get_attribute('pa_product');
                    ?></td>
                
                    <p style="text-align: center;">
                        <?php
                        if (class_exists('InpostGallery'))
                        {
                            echo do_shortcode('[inpost_fancy thumb_width="50" thumb_height="50" post_id="' . $post->ID . '" thumb_margin_left="5" thumb_margin_bottom="5" thumb_border_radius="200" thumb_shadow="0 1px 4px rgba(0, 0, 0, 0.2)" id="" random="0" group="0" border="" show_in_popup="0" album_cover="" album_cover_width="200" album_cover_height="200" popup_width="800" popup_max_height="600" popup_title="Gallery" type="fancy" sc_id="sc1413390928195"]');
                        }
                        ?>
                    </p>
                </td>
            </tr>
        <?php endwhile; // end of the loop. ?>
    </table>

I tried working with “data-role=”table” data-mode=”columntoggle” class=”ui-responsive”
and then giving the rows priority with “data-priority=”2” but without succes.
My PHP knowledge is really basic so if this is possible try to explain it as basic as you can ;).

Thanks for your time,

Sjoerd