Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #212776

    Hi,

    We have some tables on one page and I would like to change 2 things, if possible using the quick css code.

    Please confirm if this can be done easily: http://d.pr/i/SKDM/2ANtFpa5

    Thank you

    #213509

    Hey sitesme!

    It’s possible, please post a link to this page.

    Best regards,
    Josue

    #213514

    Hi!

    I was able to find a way to work around that.

    However, I am facing this other issue with the columns width: http://d.pr/i/EvG/2gdCuoiA or http://d.pr/i/Uc5B/39Op7WdL
    How can I set a percentage width for each table? Usually I need 70 – 30 % for a 2 column table.

    When we have multiple tables on the same page, it really looks bad having all columns with random widths.

    Many thanks.

    #213518

    Hi!

    Try putting some white spaces or break lines to the content of those cells.

    Cheers!
    Josue

    #213522

    Hi Josue,

    Thanks for the suggestion, but in this way, how are the column’s width set?
    Is there a way to set each table manually to 70-30% or 80-20% column width for example?

    Thank you

    #213713

    Hey!

    Unfortunately, that is not possible using the Table element of the theme. You need to manually create your own table if you want to define a certain width on the table columns.

    Best regards,
    Ismael

    #213749

    Hi Ismael,

    Thank you for the reply. So, it means that all table column widths will be randomly generated by the theme?
    Isn’t there any other way to set the width for ALL tables using some CSS code?
    This is how one page shows 2 tables with 2 columns each: http://d.pr/i/GkHi/QCPTncXn
    As much I like the easy-to-use table element from Enfold theme, it doesn’t look good at all.

    Any tips are appreciated.

    Thank you

    #213860

    Hi!

    The width will depend on the content length. Actually, you can use the rendered html of the shortcode on a Text Block. The table html should look like this:

    <table class="avia-table avia-data-table" itemscope="itemscope" itemtype="http://schema.org/Table">
        <tbody>
            <tr class="">
                <td class="width_70">Content here</td>
                <td class="width_30">Content here</td>
            </tr>
            <tr class="">
                <td class="width_70">Content here</td>
                <td class="width_30">Content here</td>
            </tr>
            <tr class="">
                <td class="width_70">Content here/td>
                <td class="width_30">Content here</td>
            </tr>
        </tbody>
    </table>

    I added the css class name width_70 and width_50. You can specify the width on Quick CSS:

    .width_70 {
    	width: 70%;
    }
    
    .width_30 {
    	width: 30%;
    }

    Cheers!
    Ismael

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

You must be logged in to reply to this topic.