Support » Developing with WordPress » 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

Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can i make this table responsive?’ is closed to new replies.