How do I make grid lines appear in a knowledgebase article?

Beantwortet

8 Kommentare

  • Trapta Singh
    Community Moderator

    Hi @Mike Fakelastname,

    Please add following code to your CSS -

    .article-body table {
      border-stylesolid;
      border-color#ddd;
    }

    .article-body th, .article-body td {
    border: solid 1px #ddd;
    }

    If you want to show same dotted line then, add this code -

    .article-body table {
      border-style: dashed;
      border-color#ddd;
    }

    .article-body th, .article-body td {
      border: dashed 1px #ddd;
    }

     

    Let us know if you face any issue.

    Cheers

    Team Diziana

    0
  • Mike Fakelastname

    Thank you for the reply.  I don't know anything about CSS.  I don't understand how I would use that coding.  Why does the table tool built into the editor not actually create a table when the article is published?  I don't understand why the tool is there.  Thank you.

    0
  • Trapta Singh
    Community Moderator

    @Mike Fakelastname,

    Sign in to your Zendesk account,

    Click on Guide Admin located in the top navigation bar


    then click on customize design located in the left navigation bar

    then click on "Edit Theme" located in the left sidebar

    then click on "CSS"

    and paste this code at the bottom of your CSS code

    Now Save and Publish your changes.

     

    Team Diziana

     

    0
  • Mike Fakelastname

    I'll give it a try.  Thank you.

    0
  • Jessie Schutz
    Zendesk Customer Care

    Hey Mike! Welcome to the Community!

    I'm glad Trapta was able to help you out with some custom code. Let us know how it goes!

    0
  • Carolyn Whitehouse

    Hi - I'm trying to figure out how to put a black border around a simple table. I am not comfortable doing anything with the CSS file. Here are my questions after reading this thread...

    First, after reading the above, I noted the info about "border color: #ddd ". So, in the editor, I selected my table, and clicked Table >Table Properties.  In the "Border" field, I typed #ddd. And now I seem to have the black table borders.

    1) Is that a reasonable way to create table borders?

    2) Are there help instructions on how to use the various Table dialog boxes in the editor? Mainly, what format of information each field expects?

    3) Is there a simple Step by Step guide to creating BASIC tables for the Help Center. i.e....

    - In the editor, click Table and choose the number of rows and columns

    - Now set the style for your Header row by doing this.

    - Now set your table border by clicking Table > Table Properties and putting this info in the Border field.

    - Now do this...

     

    0
  • Jessie Schutz
    Zendesk Customer Care

    Hi Carolyn!

    The only article we have referencing the tool for creating tables in articles can be found here: Why do some article table properties have more options? There aren't instructions for each individual field, though.

    I'm going to pass your feedback along to our Documentation team so they can take it under advisement!

    0
  • Aysan Haghani

    Hello, 

    I have a relevant question to the topic, This is the table code in our .css file

     

    .article-body table {
    table-layout: fixed;

    }

    th, td {
    border-bottom: 1px solid #ddd;
    }

    th, td {
    padding: 5px;
    text-align: left;
    vertical-align: text-top;
    }

    tr:hover {
    background-color: #ececec;
    }

    .table {
    width: 100%;
    table-layout: fixed;

    }

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

    .table th,
    .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 {
    text-align: right;
    }

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

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

    .table td {
    display: block;
    }

    @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;
    }
    }

     

    Could you please let me know how can I apply the table setting to have table border:1? 

    I want to achieve this table template to set at default 

     

    I appreciate your help

    Thanks

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk