Adding and formatting tables in Help Center articles

Return to top
Have more questions? Submit a request

56 Comments

  • Richard Hartley

    @Digna - I had the same issue as you. 

    The Advanced option Brett refers to only appeared after I had ticked the "Display Unsafe Content" checkbox under Security in the Guide Settings.  However, it made no difference to my table when I applied it.

    0
  • Melody Quinn

    @Brett - Thank you that worked for the cell properties, and you are right would be very tedious for each cell. Can you offer exactly what to edit in the CSS? I tried adding the padding to each of the table elements, but no luck. Thank you for your help!

    0
  • Brett Bowser
    Zendesk Community Team

    @Digna, Melody, and Richard, could you try editing your Guide CSS and add the following code snippet:

    .article-body td, .article-body th {
    padding: 20px;
    }

    I've added this to my Guide theme and that seems to have done the trick. You can change the 20px to the desired padding you'd like to set up.

    Let me know if this doesn't resolve the issue for you.

    Thanks!

    0
  • Melody Quinn

    @Brett - worked! Thank you!

    0
  • Brett Bowser
    Zendesk Community Team

    Happy to help Melody :) 

    0
  • Digna van Nielen

    Thanks @Brett! My tables are looking way better know :)

    1
  • Richard Hartley

    @Brett - I have done the same and it's worked for me too.  Thank you.

    I was wary about editing the theme as I was trying to stick to using the "out of the box" version.  Will the standard template be being changed to fix the issue at some point, please?

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Richard, 

    This is something our team is aware of so they are looking into other options outside of editing your Guide theme. Thanks again to everyone who has brought this to our attention!

    For now, I've created an article that goes over what code needs to be added to change the cell padding: Why don’t table settings in the editor match the published article?

    Let me know if you have any other questions :) 

    0
  • Jakob Schindegger

    HI @Brett,

    is there any update on this? I wanted to avoid editing the code and unlinking the theme.

    Thanks

    Jakob

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Jakob,

    No update currently but I can confirm this is on our Guide teams radar. We will keep this article updated once we find out more information for you :)

    0
  • Chad Hanna

    It seems really strange to have something allowed to be updated such as cell padding but it doesn't actually register.  Also the fact that when editing articles you can stretch the views but it doesn't carry over to the published article is fairly annoying.

    0
  • Chad Susa

    Hi All

    Pretty sure I'm going insane. I can't seem to get Cell background_color working (see below).

    Pretty sure if my cursor is in a cell, I select Cell Properties and then enter a hex value in the Background color field under Advanced, it should style the cell to the hex value. I have enabled allow unsafe content but it simply wont render for me.

    Source Code looks like: <td style="border-color:1;background-color:a8cbe5">Whatever string you want</td>

     

     

    Any help appreciated :)

    Cheers

    Chad 

    0
  • Jessica Hoffman

    Hi Chad Susa, it looks like you're missing the # in front of your hex code. 

     

    <td style="border-color:1; background-color:#a8cbe5">

     

    Hope that helps! 

    1
  • Chad Susa

    Thanks Jessica - thank you so much.

    I was so sure I was going insane - such a small thing I couldn't see...Wont forget that in future :)

    0
  • Roee Aizman

    Hey.

    Using a table of contexts and it seems my table width is blocked.

    All my cells looks bad and nothing I can do.

     

    How to fix it?

    0
  • Pulkit Pandey
    Community Moderator

    Hey Roee Aizman

    Can you please share the URL of your article where you are using it or share a code of that article so that I can provide you a solution for your Query.

     

    Regards,

    Pulkit

    1
  • Pulkit Pandey
    Community Moderator

    Hi Roee Aizman

    Please update the following CSS on the give line number of your style.css file and let me know it solves your issue 

    Please go the line no 3126 on your current style.css and replace the below CSS with the current one 

    @media (min-width: 992px) {
    .article-container__article {
    width: calc(100% / 12 * 8);
    max-width: 75%;
    }
    }
    0
  • Roee Aizman

    Hey Pulkit.

    It does not help at all.

    Do you have any other way to solve it?

    0
  • Roee Aizman

    Maybe to move all toc to the right??

    0
  • Pulkit Pandey
    Community Moderator

    Hey Roee Aizman

    TOC is already appearing at the right side as I am seeing on the URL you shared can you please, elaborate on what you want to move on the right side through a screenshot or the mode you prefer so that I will get a  clear point on what you exactly want to do

    Thanks 

    Pulkit

    0
  • Nelli Laine

    My table has a double-border and I can't figure out how to remove it:

    I've set the border to 2px and the colour for the border to #e42a21. How can I get rid of the double-border? I would like it to be just simple red border. Thanks for help in advance!

    0
  • Pulkit Pandey
    Community Moderator

    Hey Nelli

    Can you please share the live URL of your help center where you getting these issues, So that I go through and provide you the solution for your query.

    Thanks 

    Pulkit 

     

    0
  • Nelli Laine

    Hi Pulkit, thanks for helping me out. The URL for my Help Center is firstbeat.zendesk.com And the article having these issues is this: https://support.firstbeat.com/hc/en-us/articles/360015303333-How-to-delete-measurements-from-Sports-Cloud-

    Let me know if there is anything else you need from me.

    0
  • Pulkit Pandey
    Community Moderator

    Hi Nelli

    Thanks for sharing your URL :)

    Just add the following CSS at the bottom of your style.css file and you will get rid of the second border you are seeing.

    td {

    border: none;

    }

    Let me know if it solves your problem

    Thanks 

    Pulkit

    Team Diziana

    0
  • Nelli Laine

    Thanks, this helped :)

    0

Please sign in to leave a comment.

Powered by Zendesk