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

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

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.

@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

I'll give it a try.  Thank you.

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!

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

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!

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

Thanks this was very helpful. Updated my CSS. Simple enough.