CSS Styling on tables and footnotes - Support | Kriesi.at

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

Author

Posts
January 21, 2014 at 2:29 pm #212776

sitesme
Participant

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

January 22, 2014 at 8:21 pm #213509

Josue
Inactive Moderator

Hey sitesme!

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

Best regards,
Josue

January 22, 2014 at 8:35 pm #213514

sitesme
Participant

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.

January 22, 2014 at 8:49 pm #213518

Josue
Inactive Moderator

Hi!

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

Cheers!
Josue

January 22, 2014 at 9:01 pm #213522

sitesme
Participant

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

January 23, 2014 at 6:39 am #213713

Ismael
Moderator

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

January 23, 2014 at 9:52 am #213749

sitesme
Participant

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

January 23, 2014 at 2:55 pm #213860
Ismael
Moderator
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
Author

Posts

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

The topic ‘CSS Styling on tables and footnotes’ is closed to new replies.