Adding and formatting tables in help center articles

Return to top

40 Comments

  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Sheila Lucas

    Yes, you have added the code in right place meanwhile I have gone through it and sharing the updated code. 

    Replace the below code with the previous one in the same place where you have added it previously.

    .article-body table tr {
    height: unset !important;
    }

    Let me know if it solves your issue

    Thanks 

    Pulkit

     

    1
  • CS_process_info_mgmt

    Hello, the advanced option for cell properties is missing, any idea how to have it back? 

    0
  • Freyja

    Hello, I have a question regarding formatting tables. Every time I create a table (new table or copy and paste from another doc) the format change completely when I publish the article. I understand that is normal for the way the editor has been conceived and I understand there is a way to add a defining code on the css theme (not supported by Zendesk). But my question is: how can I avoid this? I have recently created a table on a doc and it's impossible to keep the same format between cells even I used the same parameters. How can I create a table that is "stable"? Thanks

    0
  • Stephen Kairys

    OK, I tried it. It worked OK in terms of the left padding; however it made the 2nd column really narrow. I widened it by dragging the cell border. ; Please don't take this post as a final endorsement of this solution. 

    I've already spent too much time on this formatting issue and need to get back to authoring content, so I won't be able to test further.

    Thanks.

    0
  • Mark Glinski

    Huzzah! It worked beautifully!

    Thanks for the solution @...!

    0
  • Neil
    Zendesk Customer Care
    Hi,
     
    As mentioned in the article above.
     

    If you need greater control over your table appearance, you need to change your help center security permissions to allow unsafe HTML. See Allowing unsafe HTML in help center articles for more information. If you decide to make this security change, the table properties window displays the following options:

    The Advanced tab allows you to update the style, border color, and background color.

    0
  • Stephen Kairys

    No idea where the over-100% came from. 

    If I add an empty table, all I see is the below.

    What was the reason for

    1 px =~ .26mm

    Table looks ok without it.

    Do you know of an article in the Zendesk help center that explains all these table fields?

    Thanks again. Making progress, I think. OK, back to my tech writing. :)

    0
  • Stephen Kairys

    Manny - You are not alone. I, too, am having a left-padding issue The stakeholder for this doc would prefer to have padding, but so far, I've been unable to comply.

    PS-Out of curiosity, is your issue in EDIT view or PREVIEW/PUBLISH view?

     

    0
  • Amy Gracer
    Community Moderator

    Try adding the padding setting to your CSS?

    .table tr {
    padding: 20px 0;

    }

     

    (Guide Admin > Customize Design > Edit Code > style.css)

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hey Sheila Lucas,

    Can its possible to share the URL of that article where you are getting this issue so that I can go through it and provide you a solution 

    Thank You

    Pulkit

    0
  • Marny Klump

    I am new to zendesk. I have read the article and comments. I've ensured that the allow the unsafe content has been enabled. The cell padding is not working, although I have entered background colours and table colours, none of that is showing. I am not a coder, nor do I want to be one when I grow up LOL, I just want to create the content with ease. Any assistance would be great.

    0
  • Sheila Lucas

    Hello,

    I have created numerous 2x1 tables in an article to house how-to content on different devices for our software platform. Each cell contains a numbered list and the bottom of each table are snug up against the last row of content in the editor. However, when published, some of the tables' padding extends down for at least a dozen lines:

    In editor:

    Published article:

     

    This is not a consistent issue for all tables, so I cannot identify what is causing it.

    Thank you in advance!

     

    (edit - @..., might you be able to assist?)

    0
  • Sheila Lucas

    @..., that did the trick! Thank you so much for your assistance.

    0
  • Sheila Lucas

    Sure thing, @...!

    Table issues begin here and run the rest of the way through the article.

    I appreciate your help :)

    0
  • Zsa Trias
    Zendesk Customer Care

    Hello Freyja,

    I have found this article that can help: Why don’t table settings in the editor match the published article?

    As mentioned there, by default, the Guide theme CSS overrides the cell padding you have set up through the table properties editor. The article also provides a code snippet that you can insert into your theme to have your cell padding reflected appropriately.

    0
  • Zach Brown

    I've come across a weird phenomenon that I can't quite explain related to table formatting. I often use tables with white or coloured borders to give the appearance of displaying information in blocks or tiles. I recently noticed that when I view my help center articles on my MacBook Pro screen, I can still see the lines of the formatted table. However, when I drag that same browser tab to my external monitor, the lines disappear (see screenshots for comparison). Is it possible that the higher screen resolution on my MacBook (2560x1600) is the reason that I see the lines and not on my external monitor (2560x1440)? Or could there be another reason that these lines are appearing?

    0
  • Dane
    Zendesk Engineering
    @Zach,
     
    I have also tested it on my MBP. However, I was not able to replicate the issue that you are currently experiencing. If you choose to have this investigated, please contact us through Messaging and we'll look into it further.
    0
  • Zach Brown

    Thanks for looking into it Dane. I'll contact through Messaging.

    0
  • Zach Brown

    Dane I haven't checked with another external monitor myself, but I asked a colleague to test it out and they experienced the same thing that I did. They have the same MacBook Pro that I do, not sure of the resolution on their external monitor.

    0
  • Amy Gracer
    Community Moderator

    Are those parameters on your cell? If so, yes, just add.

    1 px =~ .26mm

    I have a 10px padding on my table cells. See what works for you.

    I'm not sure why you would have a cell width set to more than 100%. Try removing that property altogether.

    Good luck!

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Glad to hear that. Happy Zendesking :)

    0
  • Stephen Kairys

    Amy Gracer

    OK, will give it a try. How did you choose 15px? How many millimeters is that?

    I assume I'd just add it to the existing parameters?

    width: 101.571%;
    height: 22px;
    background-color: beige;

    Thanks.

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi @...,

    Try replacing your code with the below code:

    /***** Tables *****/
    .table, .article-body table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    }

    @media (min-width: 768px) {
    .table, .article-body table {
    table-layout: auto;
    }
    }

    .table th, .article-body table th
    .table th a, .article-body table th a {
    color: lighten($text_color, 20%);
    font-size: 13px;
    font-weight: 300;
    text-align: left;
    }

    [dir="rtl"] .table th, [dir="rtl"] .table th a,
    [dir="rtl"] .article-body table th, [dir="rtl"] .article-body table th a {
    text-align: right;
    }

    .table tr, .article-body table tr {
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 20px;
    }

    @media (min-width: 768px) {
    .table tr, .article-body table tr {
    display: table-row;
    }
    }

    .table td, .article-body table td {
    display: block;
    }

    @media (min-width: 768px) {
    .table td, .article-body table td {
    display: table-cell;
    }
    }

    @media (min-width: 1024px) {
    .table td, .table th,
    .article-body table td, .article-body table th {
    padding: 20px 30px;
    }
    }

    @media (min-width: 768px) {
    .table td, .table th,
    .article-body table td, .article-body table th {
    padding: 10px 20px;
    height: 60px;
    }
    }

    It looks like Zendesk previously used to add a class "table" to the tables added in article content. But now it doesn't seem to have that class so the CSS is not applying to it.

    However, try the above code and let us know if that works for you.

    Thanks

    0
  • Mark Glinski

    After reading through this thread, it appears that this issue hasn't been resolved. I, too, am experiencing the problem where the cell padding appears in edit mode but not in preview or publish mode. I've tried to manipulate the padding in the CSS included with Copenhagen, but it does nothing. 

    Zendesk, please advise. Thanks!

    0
  • Marny Klump

    @... https://help.production.membersuite.com/hc/en-us/articles/360058903191-Career-Center-Field-Descriptions

    I got the cell padding but I still can't get the colour for the background in the headers/titles to work. Also, how do I make it so that all are consistent widths. They were when I copied/pasted, but then some have changed on different articles. 

    Thanks

    0
  • Amy Gracer
    Community Moderator

    You asked how many millimeters is a pixel :)

    A pixel is about .26 mm.

    I'd remove all width styles for now and add the padding. You can try 5, 10, 15px. Whatever works for you. 

    All of these settings are part of the HTML/CSS  code.

    In Zendesk, they'll call this customizing the theme. See here:

    https://support.zendesk.com/hc/en-us/articles/203664326-Customizing-your-help-center-theme

    I suggest you look at https://www.w3schools.com/tags/default.asp

    It's a great resource for learning how to style your html just the way you want it. 

    We writers have to wear many hats! Fine tuning the design can be a nice break from it sometimes. (Now I have to get back to mine!)

    Good luck again :)

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hey Marny Klump

    Can it's possible to share the URL of an article where you are getting this issue so that I can look at it and provide the solution.

    Thanks

    Pulkit

    0
  • Stephen Kairys

    @...

    Same thing here. Good luck getting it resolved. I'm spending time on silly formatting issues which is costing me time authoring content.

    0
  • Mark Glinski

    Hi, @.... Yes, I'd love to share the CSS.

    I'm sending all the table styles, so please forgive the potential overkill ;-)

    When I discovered the issue initially (without touching the CSS), I tried manipulating the table padding locally. No dice. So then I tried adding padding to the tr and td styles. Same thing. 

    I appreciate you looking at this:

    /***** Tables *****/
    .table {
    width: 100%;
    table-layout: fixed;
    }

    @media (min-width: 768px) {
    .table {
    table-layout: auto;
    }
    }

    .table th,
    .table th a {
    color: lighten($color_3, 20%);
    font-size: 13px;
    font-weight: 300;
    text-align: left;
    }

    [dir="rtl"] .table th, [dir="rtl"]
    .table th a {
    text-align: right;
    }

    .table tr {
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 20px;
    }

    @media (min-width: 768px) {
    .table tr {
    display: table-row;
    }
    }

    .table td {
    display: block;
    padding: 20px;
    }

    @media (min-width: 768px) {
    .table td {
    display: table-cell;
    }
    }

    @media (min-width: 1024px) {
    .table td, .table th {
    padding: 20px 30px;
    }
    }

    @media (min-width: 768px) {
    .table td, .table th {
    padding: 10px 20px;
    height: 60px;
    }
    }
    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi @Mark Glinski,

    Can you show us what CSS you are trying to add? It will be great to share the screenshot of your theme and how it looks after adding the CSS code.

    Thanks

    0

Please sign in to leave a comment.

Powered by Zendesk