• Trapta Singh

  • August 18, 2017 05:22

  Community Moderator

  Hi @Mike Fakelastname,

  Please add following code to your CSS -

  .article-body table {
    border-style: solid;
    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

• Mike Fakelastname

  • August 18, 2017 12:25

  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.

• Trapta Singh

  • August 18, 2017 13:11

  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

   

• Mike Fakelastname

  • August 18, 2017 13:13

  I'll give it a try.  Thank you.

• Jessie Schutz

  • August 21, 2017 16:46

  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!

• Carolyn Whitehouse

  • December 19, 2017 17:08

  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...

   

• Jessie Schutz

  • December 22, 2017 19:56

  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!

• Aysan Haghani

  • October 20, 2020 18:52

  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

Please sign in to leave a comment.