Home Forums Archived Forums Not Theme Related Table not expanding to set 100%

This topic contains 4 replies, has 3 voices, and was last updated by  scrambler 2 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #19761

    swmagic999
    Participant

    I have this code on webpage http://jam.avwebmaster.com/products/minutes


    <table class=”pricingTable” border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″>
    <tbody>
    <tr>
    <td width=”25%”></td>
    <td class=”red1 colbkg” valign=”top” width=”25%”>Minutes –
    White Glove Package</td>
    <td class=”red1″ valign=”top” width=”25%”>Minutes –
    Pro Package</td>
    <td class=”red1 colbkg” valign=”top” width=”25%”>Minutes –
    Mini Package*
    (see details below)</td>
    </tr>

    But it’s not stretching the table with the 100% and splitting into 4 even columns.

    Why?

    #31697

    Weaver
    Keymaster

    This is an HTML question, and not really related to the theme.

    In general, however, using tables is ideally suited for responsive design. Using <div>s with 25% width is better.

    #31698

    scrambler
    Moderator

    Tables in Weaver are styled with CSS, so you need to specify the width with CSS using a style attribute
    Instead of using

    <table class=”pricingTable” width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

    use

    <table class=”pricingTable” style=”width:100%;” border=”0″ cellspacing=”0″ cellpadding=”0″>

    Given you have a class on the table, you can also use custom CSS rules placed in the Theme Custom CSS Rule box
    table.pricingTable {width:100%;}

    this is true for any other styling, do it all with CSS not HTML attribute

    You can also read the article below
    http://forum.weavertheme.com/discussion/8616/tables-versus-divs-how-to-style-tables-in-weaver

    #31699

    swmagic999
    Participant

    well it does show wide now on the website with that fix, but it still only shows 3 columns on my IPhone.  Why is it not behaving responsively?

    http://jam.avwebmaster.com/products/minutes

    #31700

    scrambler
    Moderator

    the link you gave me points to a page with a table set to 50% the old way.

    But if you mean that on phones the table get cutoff, then that is probably because you reach the non compressible point of the table.

    You need to read the article I referenced below

    http://forum.weavertheme.com/discussion/8616/tables-versus-divs-how-to-style-tables-in-weaver

    Which explains that inherent issue with tables, and some ways around it

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘ Not Theme Related’ is closed to new topics and replies.