Recent searches


No recent searches

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

Answered


Posted Aug 16, 2017

Hi.  I'm sorry if this has been asked a thousand times before.  I'm new here.  I recently pasted into a knowledgebase article from a document I wrote in Microsoft Word.  It's basically a table with three columns and many rows.  When I paste in, the grid lines appear as dotted lines...

...but when I publish, there are no lines at all...

Can anyone tell me how to make the lines appear in the published article?  Thank you all!




1

9

9 comments

image avatar

Trapta Singh

Zendesk LuminaryCommunity 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


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.

1


image avatar

Trapta Singh

Zendesk LuminaryCommunity 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


I'll give it a try.  Thank you.

0


image avatar

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


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


image avatar

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


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


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

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post